Question

我想将我的代码分开，所以我决定将每个div分成html文件。每个HTML文件都有一些jQuery点击事件。我有2个文件index.html和menu.html。

问题是我必须在两个文件中包含jQuery库才能使它工作。

有没有什么方法可以让我一次包含库并让它在两个文件上都有效？我试图仅将库包含在索引页面中，但是菜单点击不起作用。

我通过iframe包含了menu.html文件。

<iframe src="left-menu.html"></iframe>

Answer 1

您可以使用jQuery load()方法将menu.html添加到index.html的DOM中。这样，在index.html中创建的jQuery实例也将应用于从menu.html加载的内容。

例如在index.html中你可以这样做：

$(document).ready(function() {
    $('#some-menu').load('some-local-path/menu.html');
});

请注意$('#some-menu')只是index.html中我们加载menu.html内容的另一个元素。同样重要的是要注意，由于same-origin-policy，作为load()方法的一部分执行的AJAX请求仅适用于同一域，协议和端口中的文件（除非您使用{{ 3}}）。

Answer 2

在您的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>

在单独的文件“_HeaderPartial.html”中：

<div>
    <h1>This is the Header from its _Partial file</h1>
</div>

在单独的文件“_FooterPartial.html”中：

<strong>And this is from the footer partial file</strong>

结果：

这是_Partial文件的标题

这是主要内容，来自索引文件

这是来自页脚部分文件

Answer 3

我有另一个解决方案。它似乎使代码更美观，更短。首先定义include函数。

var include = function(beReplacedId,url){
jQuery.get(url,function(data){
    jQuery(beReplacedId).replaceWith(data);

});

}

在html页面上使用onload来触发包含这样的内容。

<img id="partTopicDetail" onload="include(this,this.id+'.html')" src="img/any-image.png" >

编译器运行后，它将替换img标记并加载您需要的内容。通过以上技巧，我可以附加到index.html

中的任何位置

如何使用jQuery包含HTML文件？

3 个答案:

这是_Partial文件的标题