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

2020-10-22 15:38:20 投诉/举报
这篇文章主要为大家详细介绍了js实现一个html页面引入另一个html页面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

    页面的引入是不少用户想实现的,一般情况下我们会使用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>

但是有的时候我们发现有些JS或者联盟是禁止使用IFRAME引入的,如果用iframe会出现提示:iframe not allow!

     因此这个时候我们需要通过其他的方式来实现index.html的页面引入。

1、通过jq的load方法引入

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

2、原生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>

3、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>
<!--注意顺序-->
<!--import在头部引入,里面是啥就是啥-->
<script type="text/javascript">
    document.write(page1.import.body.innerHTML);
</script>
你好呀!
<!--本页面写入内容-->
<script type="text/javascript">
    document.write(page2.import.body.innerHTML);
</script

以上就是js实现一个html页面引入另一个html页面的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持乐享吧网。

织梦cms数据库使用Mysql8.0导致无法登录后台的解决办法

昨天晚上都快12点了,一个用户咨询织梦模板网小编技术,反馈说织梦系统安装后登陆网站后台,却一直提示说用户名不存在,很是奇怪。织梦361接到用户请求后,第一感觉就是2种情况