web端嵌入界面的常用方法欢迎关注，【前端突击】猎鹰突击，迎难而上，期待你的加入...

前言：最近遇到一个大屏嵌入云词图的场景，所以写篇文章记录下，你都遇到了哪些嵌入页面的方法，可以评论区探讨

场景

大屏上某一块区域，展示动效的云词图，云词图内容可以通过数据请求获取

方法

在对应的模板中嵌入脚本，脚本像这样

<script type="text/javascript">
    function getInnerHTML() {
      document.getElementById("container").innerHTML = '<object type="text/html" data="http://10.101.12.254:3030/src/3D-demo/3Dtag.html" width="300" height="500"></object>'
    }
    getInnerHTML()
  </script>

问题来了，这个http://10.101.12.254:3030/src/3D-demo/3Dtag.html又是什么呢？

这个就是我们要嵌入的静态页面，这个静态页面包含动态生成的云词图
这个静态资源需要单独部署到服务器上才能访问

考虑到部署的环境较复杂，这里不再赘述，你可以看我之前的文章，公众号【前端突击】，完成自己的服务器搭建和发布为了演示这里启动本地的node服务，模拟服务端场景，所以你看到的那个地址是我本地的ip地址云词图git地址自行下载

dragon-components

除了上述这种原生的js嵌入方法外，还有一些常用的方法

其他方案

jQuery之load

<body>
    <div id="container"></div>
    <script>
          $("#container").load("http://10.101.12.254:3030/src/3D-demo/3Dtag.html");
    </script>
</body>

iframe

<body>
   <div id="container">
        <iframe align="center" width="100%" height="200" src="http://10.101.12.254:3030/src/3D-demo/3Dtag.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
   </div>
 </body>

import

<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>
<!--注意顺序-->
<script type="text/javascript">
    document.write(page1.import.body.innerHTML);
</script>
<script type="text/javascript">
    document.write(page2.import.body.innerHTML);
</script>

综上

根据自己的业务场景进行合理的选择，建议原生的兼容性会更好一些，所以笔者也是用的原生的js标签object方法

通过上面的介绍，希望给你一些建设性的参考，有任何问题欢迎骚扰，加入【前端突击】，长按二维码关注，或微信搜索前端突击一起探讨前端的边界

欢迎关注，【前端突击】猎鹰突击，迎难而上，期待你的加入...