在一个html里面引入另一个html的几种方法

本文详细介绍了HTML中的iframe标签及其常见属性，包括如何通过contentWindow和contentDocument API操作iframe内的DOM元素，探讨了iframe的异步请求特点及如何解决跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.iframe

例子：

<iframe src="//www.baidu.com">
  <p>您的浏览器不支持  iframe 标签。</p>
</iframe>

一些基本属性：

src : 页面地址（如果是跨域。父页面不能对子页面进行改写，只能实现页面跳转）
height /width ：高度/宽度
name : 命名。可以通过window.iframe[name] 被调用
scrolling : 滚动模式（yes,no, auto）
sandbox :html5新特性，对iframe 进行一些列限制，如：script 脚本不能执行，不能发送ajax请求，不能使用localStorage,cookie等本地存储，不能发送表单......（有配置项可以设置）
allowtransparency，是否允许iframe设置为透明，默认：false
allowfullscreen，是否允许iframe设置为全屏，默认：false

常见的用法：

主要两个API ：contentWindow 和 contentDocument 分别用于获取window对象和document对象（iframe.contentWindow/iframe.contentDocument），用于操作iframe 里面的DOM内容，获取父级内容的API挂载在window：
```
window.parent 获取上一级的window对象，如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的window对象，即，就是你打开页面的文档
window.self 返回自身window的引用。
```
iframe 的异步请求，但是iframe是和主页共享连接池的
跨越：使用document.domain = "url" ；将不同文件指定相同的主域名
内容安全策略（CSP）：HTTP头部信息加上Content-Security-Policy字段或加上<meta>标签
<meta http-equiv="Content-Security-Policy" content="child-src 'unsafe-inline' 'unsafe-eval' www.easonwong.com">

2.js的load函数，$(“#page1”).load(“b.html”)，document.write

3.object

4.import(只能引入css文件)

5.include

6.<frameset> <frame ><frame ></frameset>

例子：

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>