包含其他HTML文件的HTML文件

本文介绍了包含其他HTML文件的HTML文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建了一个网页，我想在那里显示另一个HTML文件。我用jQuery来做到这一点，但无法显示我包含的文件的内容。你为什么认为这发生了。

sample.html >

 < html> 
< head> 
< title>仅限样品< / title> 
 
< script type =text / javascriptsrc =https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js>< /脚本> 
< script> 
 $（function（）{
 $（'＃footerLang'）。load（sampleFooter.html）; 
}）; 
< / script> 
 
 
< / head> 
 
< body> 
 
< div id =footerLang> 
< h1>< / h1> 
< / div> 
 
< / body> 
 
< / html>

sampleFooter.html

 < p>这是一个徒步旅行< / p>

解决方案

这很可能是因为您要放置以下块在头部没有 $（document）.on（ready，function（）{...;}）;

  $（function（）{
 $（'＃footerLang'）。load（sampleFooter.html ）; 
}）;

在这种情况下， jQuery 无法找到 #footerLang 元素自 DOM 尚未准备就绪，您可以按照以下步骤修改脚本：

$ $ $ $ $ $ $ $ $ $'$ $ $ $ $' #footerLang'）。load（sampleFooter.html）;
}）;
}）;

或者在< / body>

 < html> 
< head> 
< title>仅限样品< / title> 
 
< script type =text / javascriptsrc =https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js>< /脚本> 
 
 
< / head> 
 
< body> 
 
< div id =footerLang> 
< h1>< / h1> 
< / div> 
 
< script> 
 $（function（）{
 $（'＃footerLang'）。load（sampleFooter.html）; 
}）; 
< / script> 
< / body> 
 
< / html>

I created a web page wherein I want to display there another HTML file. I used jQuery to do this but wasn't able to display the content of the file I have included. Why do you think this happened. Thanks a lot.

Here's my code for my mainpage.

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>

解决方案

It is highly possibly because you are placing the following block in head without $(document).on("ready", function() { ...; });

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

In this case jQuery will unable to find the #footerLang element since the DOM is not ready, you could revise the script as follow

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

or move the script tag just before the </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>

这篇关于包含其他HTML文件的HTML文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！