在html页面中引入另一个html（存在无法渲染等问题）

最新推荐文章于 2023-04-12 15:33:28 发布

buchiyudegarcat

最新推荐文章于 2023-04-12 15:33:28 发布

阅读量886

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/buchiyudegarcat/article/details/122284624

版权

初学vue

1.使用jQuery load方法

<div id="register">

</div>
<!--    测试内容-->
test1
<script type="text/javascript">
  $("#register").load("./src/html/02register.html")
</script>

问题1：页面可以加载，但是无法渲染。

问题2：运行vue项目工程，甚至无法加载html页面

2.使用原生js的object标签引入

<div id="register">

</div>
<!--    测试内容-->
test1
<script type="text/javascript">
  document.getElementById("register").innerHTML = '<object type ="text/html" data="./src/html/02register.html" width="100%" height="100%"></object>'
</script>

渲染正常，需要适配。

问题3：运行vue项目工程，存在bug，无限嵌套加载

3.iframe引入

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

渲染正常：

问题4：vue项目无法正常加载

4.import文件引入（需要在服务器环境下）

    <link rel="import" href="./src/html/02register.html" id="page1"/>
  </head>
  <body>
<!--原本内容    <div id="app"></div>-->
    <!-- built files will be auto injected -->
<div id="div1"></div>
test2
<script>
  document.getElementById("div1").innerHTML = page1.import.body.innerHTML;
</script>

问题5：无法正常加载

TypeError: Cannot read properties of undefined (reading 'body')

综上：开发时，建议使用iframe引入html页面；使用vue项目工程时，准备尝试webpack打包后查看其效果。

参考内容：

js实现一个html页面引入另一个html页面_haogemr的博客-CSDN博客_js引入html