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

2020-07-03 12:40:31

字体：大中小

来源：转载

供稿：网友

这篇文章主要为大家详细介绍了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页面的全部内容，希望对大家的学习和解决疑问有所帮助，也希望大家多多支持错新网。

上一篇：JS根据系统时间跳转到相应的页面

下一篇：JS实现多个联盟广告调用代码打开页面随机显示一个联盟广告代码