通过jq的load方法引入
<body>
<div id="div"></div>
<script>
$("#div").load("index.html");
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
原生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>
- 1
- 2
- 3
- 4
- 5
- 6
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>
- 1
- 2
- 3
- 4
- 5
- 6
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
<!--注意顺序-->
<!--import在头部引入,里面是啥就是啥-->
<script type="text/javascript">
document.write(page1.import.body.innerHTML);
</script>
你好呀! <!--本页面写入内容-->
<script type="text/javascript">
document.write(page2.import.body.innerHTML);
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
</div>
<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-b6c3c6d139.css" rel="stylesheet">
<div class="more-toolbox">
<div class="left-toolbox">
<ul class="toolbox-list">
<li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true">
<use xlink:href="#csdnc-thumbsup"></use>
</svg><span class="name">点赞</span>
<span class="count">4</span>
</a></li>
<li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-csdnc-Collection-G"></use>
</svg><span class="name">收藏</span></a></li>
<li class="tool-item tool-active is-share"><a href="javascript:;"><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-csdnc-fenxiang"></use>
</svg>分享</a></li>
<!--打赏开始-->
<!--打赏结束-->
<li class="tool-item tool-more">
<a>
<svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg>
</a>
<ul class="more-box">
<li class="item"><a class="article-report">文章举报</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="person-messagebox">
<div class="left-message"><a href="https://blog.csdn.net/document_dom">
<img src="https://profile.csdnimg.cn/E/5/A/3_document_dom" class="avatar_pic" username="document_dom">
<img src="https://g.csdnimg.cn/static/user-reg-year/2x/2.png" class="user-years">
</a></div>
<div class="middle-message">
<div class="title"><span class="tit"><a href="https://blog.csdn.net/document_dom" data-report-click="{"mod":"popu_379"}" target="_blank">haogemr</a></span>
</div>
<div class="text"><span>发布了40 篇原创文章</span> · <span>获赞 7</span> · <span>访问量 3万+</span></div>
</div>
<div class="right-message">
<a href="https://im.csdn.net/im/main.html?userName=document_dom" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-letter">私信
</a>
<a class="btn btn-sm bt-button personal-watch" data-report-click="{"mod":"popu_379"}">关注</a>
</div>
</div>
</div>