HTML网页下，在div标签中嵌套其他html页面

朱雀 2022-05-16 13:08 372阅读 0赞

主页面为main.html,点击在div添加html按钮id为btn,  
div的id为viewDiv，要插入的本地html为new.html。

方法一：基于Jquery的DIV嵌套html（测试可用）

<script src="js/jquery.js"></script>

$(document).ready(function(){ 
      $("#btn").click(function(){ 
        $('#viewDiv').load('new.html');
      })
    })

点击按钮即可在div中添加new.html。

方法二：纯js方法。（亲测可用，推荐此方法）

function load_home() { 
     document.getElementById("viewDiv").innerHTML = '<object type="text/html" data="new.html" width="100%" height="100%"></object>';
       }

<button type="button" id="btn" onClick="javascript:load_home();" >确认</button>

方法三：iframe 方法（未测试）

<div class="main-container" id="main" style="width:99%">
     <iframe src="new.html" width="100%" height="100%" frameborder="0">
     您的浏览器不支持iframe，请升级
     </iframe>
    </div>

转载来自：[https://blog.csdn.net/qq\_36305327/article/details/72846343][https_blog.csdn.net_qq_36305327_article_details_72846343]

[https_blog.csdn.net_qq_36305327_article_details_72846343]: https://blog.csdn.net/qq_36305327/article/details/72846343

发表评论取消回复

表情：

评论列表（有 0 条评论，372人围观）

还没有评论，来说两句吧...

相关阅读

相关如何在HTML标签内嵌入一个HTML页面

关于iframe标签用法就不提了，现在很少人用了吧。直接js实现很舒服，用异步请求的方法加载为标签内添加内容，看代码吧： //为header标签中加载he

朴灿烈づ我的快乐病毒、/ 2023年06月27日 03:51/ 0 赞/ 18 阅读

相关 html5 div标签属性,HTML: <div> 标签

HTML: 标签 HTML 标签定义了HTML文档中的通用容器，该容器通常用于对元素进行分组。此标签通常也称为元素。在线示例文档中创建了三个标签：示例

ゞ浴缸里的玫瑰/ 2022年10月06日 06:57/ 0 赞/ 425 阅读

相关 html切换div标签

实现切换table标签实例，如下代码可以直接copy，根据自己需要的样式调试使用。 <!DOCTYPE html> <html lang="en"> <head>

古城微笑少年丶/ 2022年06月01日 01:05/ 0 赞/ 364 阅读

相关 HTML标签嵌套规则

看了网上有各种相关的总结，所以我就不再重复粘贴复制，只是把比较容易犯错的整理一下（内容越少越容易看到重点哈，想要看详细的，我下面有附链接）规则如下：内联元素不要嵌

男娘i/ 2022年05月24日 12:05/ 0 赞/ 315 阅读

相关 HTML网页下，在div标签中嵌套其他html页面

主页面为main.html,点击在div添加html按钮id为btn, div的id为viewDiv，要插入的本地html为new.html。方法一：基于Jquery的

朱雀/ 2022年05月16日 13:08/ 0 赞/ 373 阅读

相关如何将一个HTML页面嵌套在另一个页面中

[如何将一个HTML页面嵌套在另一个页面中][HTML] 2010-05-05 16:45 559人阅读 [ 评论][Link 1](1) [收藏][Link 2] [

﹏ヽ暗。殇╰゛Y/ 2022年04月11日 14:51/ 0 赞/ 562 阅读

相关 html页面引入其他html页面代码

{include file="/course/common/footer.html"} //注意路径书写方式用该语法可以引入公共html模板代码举例：

川长思鸟来/ 2022年02月04日 06:55/ 0 赞/ 463 阅读

相关 HTML DIV标签布局

这个代码是我学习制作网页时候在网上搜索的到的一篇文章，我也是第一次学，当我看到这个代码的时候首先想到的是创建文本然后复制，保存为test.html。打开先看看实现了怎么样的功能

╰半橙微兮°/ 2022年02月01日 19:13/ 0 赞/ 621 阅读

相关 HTML DIV标签

1. 标签分类常见的html标签大体上分为两种：内联标签、块级标签。内联标签：不会新起一行显示。（常见的有：label、span、a、input、img、select、

男娘i/ 2021年09月14日 02:02/ 0 赞/ 481 阅读

相关 HTML <div>标签

div是块级元素，主要用作大的框架布局，比如将网页划分左中右结构。也就是说网页的骨架主要通过div来架设的，而网页的血肉则是有span、p或者ul等元素完成。

小灰灰/ 2020年05月16日 20:44/ 0 赞/ 850 阅读