js实现一个html页面引入另一个html页面

关注

原创最新推荐文章于 2026-09-18 11:00:01 发布 3.4w 阅读 AI 写同款· GEO 优化 ›

html页面引入另一个html页面01 在使用华丹智能WEB报表快速开发平台的过程中，想要自己重新制作一个登陆注册页面，并且想要在登陆和注册页面的顶部和底部固定样的内容样式，这时考虑到第一个方案：两个独立页面，每个页面都包含顶部和底部的内容，这样如果后期维护，修改顶部或者底部的信息，就需要修改两个文件，如果以后有其他需求，维护不方便，所以搜索了一下相关技术，进行总结了几种使用文件引入的方式。（文中代码都是测试代码） 1、使用import引入(中引入文件，<!DOCTYPE html> <html> <head&gt 阅读详情

通过jq的load方法引入

<body>
    <div id="div"></div>
    <script>
          $("#div").load("index.html");
    </script>
</body>

原生js的object标签引入

<body>
    <div id="div"></div>
    <script>
          document.getElementById("div").innerHTML = '<object type="text/html" data="index.html" width="100%" height="100%"></object>';
    </script>
</body>

iframe引入

<body>
   <div id="div">
        <iframe align="center" width="100%" height="200" src="index.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
   </div>
 </body>

import引入(head中引入文件，script中加载内容)

href链接引入的html文件，id可以看做页面引导，在script中用到
注意：需要在服务器环境下，否则会报跨域错误

<head>
    <meta charset="utf-8" />
    <title>主页面</title>
    <!--import引入-->
    <link rel="import" href="top.html" id="page1"/>
    <link rel="import" href="fotter.html" id="page2"/>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
</body>

<script type="text/javascript">
    document.getElementById("div1").innerHTML = page1.import.body.innerHTML;
    document.getElementById("div2").innerHTML = page2.import.body.innerHTML;
</script>