html文件引入外部的html文件的方法

最新推荐文章于 2022-02-11 17:01:24 发布

原创最新推荐文章于 2022-02-11 17:01:24 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html引入外部HTML

html引入html方法专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了网页加载的四种主流技术：使用div结合jQuery的.load方法、iframe标签、object标签以及import标签。每种方法都提供了详细的代码示例，帮助读者理解如何在网页中加载外部页面，适用于不同场景的需求。

一、div+$(“#page1”).load(“b.html”)
参考代码：

<body>
    <div id="page1"></div>
    <div id="page2"></div>
    <script>
          $("#page1").load("page/Page_1.html");
          $("#page2").load("page/Page_2.html");
    </script>
</body>

二、iframe 【本人常用这种，比较常见】
参考代码：


   <div id="page1">
        <iframe align="center" width="100%" height="170" src="page/Page_1.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
   </div>
   <div id="page2">
        <iframe align="center" width="100%" height="170" src="page/Page_2.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
   </div>

三、object引入
参考代码：


    <object style="border:0px" type="text/x-scriptlet" data="page/Page_1.html" width=100% height=150>
    </object>

四、import引入
参考代码：

<head>
    <link rel="import" href="page/Page_1.html" id="page1">
</head>
<body>
    <script>
        console.log(page1.import.body.innerHTML);
    </script>
</body>

原文链接：https://blog.youkuaiyun.com/arvin0/article/details/56839242