HTML 中引入调用另一个 HTML 的方法

最新推荐文章于 2024-09-22 11:12:26 发布

极客点儿

最新推荐文章于 2024-09-22 11:12:26 发布

阅读量5.8k

点赞数 1

分类专栏： # WEB

本文链接：https://blog.csdn.net/yilovexing/article/details/78873103

版权

WEB 专栏收录该内容

33 篇文章 3 订阅

订阅专栏

本文介绍了几种常见的网页元素动态加载技术，包括使用 jQuery 的 load 方法、iframe、object 标签、import 引入以及利用 Bootstrap 和 EasyUI 组件实现页面局部刷新的方法。这些技术能够帮助开发者实现高效且灵活的网页内容更新。

摘要由CSDN通过智能技术生成

一、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>
 
 1
2
3
4
5
6
7
8

二、iframe
参考代码：

<head>
</head>
<body>
   <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>
</body>
 
 1
2
3
4
5
6
7
8
9
10

三、object引入
参考代码：

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

四、import引入
参考代码：

<head>
    <link rel="import" href="page/Page_1.html" id="page1">
</head>
<body>
    <script>
        console.log(page1.import.body.innerHTML);
    </script>
</body>
 
 1
2
3
4
5
6
7
8