Question

我创建了一个网页，其中我想在那里显示另一个HTML文件。我使用jQuery来执行此操作，但无法显示我包含的文件的内容。为什么你认为这发生了。非常感谢。

这是我的主页的代码。

sample.html

<html>
<head>
<title> Sample Only </title>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
    <script> 
        $(function(){
            $('#footerLang').load("sampleFooter.html");
        });
    </script> 


</head>

    <body>

        <div id="footerLang">
            <h1></h1>
        </div>

    </body>

</html>

sampleFooter.html

<p> THIS IS A FOOTER </p>

Answer 1

很可能是因为您将以下区块放在head而没有$(document).on("ready", function() { ...; });

$(function(){
    $('#footerLang').load("sampleFooter.html");
});

在这种情况下jQuery无法找到#footerLang元素，因为DOM尚未就绪，您可以修改脚本，如下所示

$(function(){
    $(document).on("ready", function () {
        $('#footerLang').load("sampleFooter.html");
    });
});

或在</body>

之前移动脚本标记

<html>
<head>
<title> Sample Only </title>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>


</head>

    <body>

        <div id="footerLang">
            <h1></h1>
        </div>

    <script> 
        $(function(){
            $('#footerLang').load("sampleFooter.html");
        });
    </script> 
    </body>

</html>

Answer 2

我发现这只是一个浏览器兼容性问题。我在Firefox中启动它并且它有效。

HTML文件包括另一个HTML文件

2 个答案: