如何使用 jQuery 包含 HTML 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15320801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to include an HTML file with jQuery?
提问by user2153441
I want to make my code separate so I decided to divide each divto html files. Each HTML file has some jQuery click events. I have 2 files index.htmland menu.html.
我想让我的代码分开，所以我决定将每个代码分成divhtml 文件。每个 HTML 文件都有一些 jQuery 单击事件。我有 2 个文件index.html和menu.html.
Problem is that I have to include the jQuery library in both files to make it work.
问题是我必须在两个文件中都包含 jQuery 库才能使其工作。
Is there any way that I can include library one time and have it work on both files? I tried to include the library in the index page only, but then the menu click doesn't work.
有什么方法可以一次包含库并让它在两个文件上都工作？我试图仅在索引页面中包含该库，但随后单击菜单不起作用。
I included the menu.htmlfile through an iframe.
我menu.html通过 iframe包含了该文件。
<iframe src="left-menu.html"></iframe>
回答by Boaz - Reinstate Monica
You can add menu.htmlinto the DOM of index.htmlwith the jQuery load()method. This way the jQuery instance created in index.htmlwould also apply to the content loaded from menu.html.
您可以使用 jQuery方法添加menu.html到 DOM 中。这样，在 中创建的 jQuery 实例也适用于从.index.htmlload()index.htmlmenu.html
For example in index.htmlyou can do:
例如在index.html你可以这样做：
$(document).ready(function() {
$('#some-menu').load('some-local-path/menu.html');
});
Note how $('#some-menu')is just another element in index.htmlinto which we load the contents of menu.html. It's also important to note that because of the same-origin-policy, the AJAX request performed as part of the load()method would only work with files in the same domain, protocol and port (unless you're using CORS).
注意如何$('#some-menu')在短短另一个元素index.html为我们加载的内容menu.html。同样重要的是要注意，由于同源策略，作为load()方法的一部分执行的 AJAX 请求只能处理相同域、协议和端口中的文件（除非您使用CORS）。
回答by Shane
In your HTML:
在您的 HTML 中：
<body>
<header>
<div data-includeHTML="_HeaderPartial.html"></div>
</header>
<main>
<div>
This is the main content, from the index file
</div>
</main>
<footer>
<div data-includeHTML="_FooterPartial.html"></div>
</footer>
<script>
$(document).ready(function () {
$("div[data-includeHTML]").each(function () {
$(this).load($(this).attr("data-includeHTML"));
});
});
</script>
</body>
In a separate file "_HeaderPartial.html":
在单独的文件“_HeaderPartial.html”中：
<div>
<h1>This is the Header from its _Partial file</h1>
</div>
In a separate file "_FooterPartial.html":
在单独的文件“_FooterPartial.html”中：
<strong>And this is from the footer partial file</strong>
The result:
结果：
This is the Header from its _Partial file
这是来自其 _Partial 文件的标题
This is the main content, from the index file
这是主要内容，来自索引文件
And this is from the footer partial file
这是来自页脚部分文件
回答by Lee Tu?n
I have another solution. It seems to make code more beautiful and shorter. First define include function.
我有另一个解决方案。它似乎使代码更漂亮和更短。首先定义包含函数。
var include = function(beReplacedId,url){
jQuery.get(url,function(data){
jQuery(beReplacedId).replaceWith(data);
});
}
}
On html page use onload to trigger include like this.
在 html 页面上使用 onload 来触发这样的包含。
<img id="partTopicDetail" onload="include(this,this.id+'.html')" src="img/any-image.png" >
After the compiler runs through it will replace img tag and load what you need. With above trick i can attach to any place in my index.html
编译器运行后，它将替换 img 标签并加载您需要的内容。通过上述技巧，我可以附加到我的 index.html 中的任何位置
