jQuery .load()函数无法正常工作，因为加载的文件包含小型JS [英] JQuery .load() function doesn’t work because file loaded contains small JS
问题描述
根据这篇文章的建议，将两个html文件包含到另一个html文件中:(
Two html files are being included into another html file, following advice from this post: (Include another HTML file in a HTML file). A JavaScript is being used to achieve that, but one of the files loads perfectly and the other doesn't because it contains a small JavaScript. I wonder if there’s a way to fix that without having to use a method different from JavaScript for the includes. Please help me.
我已经将JS与其他include一起测试过，它的工作原理很像魅力.当我从包含中删除小型JS时，它可以工作，但是JS需要包含在包含中. Google和StackOverflow没有解决此问题的方法.
I have tested the JS with other includes and it works like a charm. When I remove the small JS from the include it works, but the JS needs to be in the include. Google and StackOverflow don't have a solution to the problem.
这是通过JS加载的包含(footer.html)，它不会加载:
This is the include (footer.html) that is being loaded through JS, which doesn't load:
<p>
Copyright ©
<script>
document.write(new Date().getFullYear());
</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
</p>
如您所见，有一个小的JS阻止了文件的加载.
As you see there's a small JS which prevent's the file from loading.
这是通过JS加载footer.html的html文件:
And this is the html file where the footer.html is being loaded through JS:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>This is a Webpage</title>
<SCRIPT src="js/jquery-3.2.1.min.js"></SCRIPT>
<script>
$(function(){
var includes = $('[data-include]');
jQuery.each(includes, function(){
var file = '/en/inc/' + $(this).data('include') + '.html';
$(this).load(file);
});
});
</script>
</head>
<body>
<div data-include="menu"></div>
<BR><BR><BR>
Content goes here
<BR><BR><BR>
<div data-include="footer"></div>
</body>
</html>
整个网页被阻止.这意味着您只会看到数字"2019"，而不是网页.
The complete webpage gets blocked. That means you only see the number "2019" instead of the webpage.
推荐答案
脚本完成并加载文档后，将插入另一页，因此document.write将替换当前页面.
The other page will be inserted after the script completes and the document is loaded, so the document.write will replace the current page.
不要使用document.write-而是使用DOM方法选择并插入文本，例如:
Don't use document.write - use DOM methods to select and insert text instead, for example:
<p id="rights"></p>
<script>
document.querySelector('#rights').innerHTML = `Copyright © ${new Date().getFullYear()}
All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>`;
</script>
(如果所有包含此子页面的页面也使用jQuery，则可以使用它代替document.querySelector)
(if all pages which include this subpage also use jQuery, you can use it instead of document.querySelector)
这篇关于jQuery .load()函数无法正常工作，因为加载的文件包含小型JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
