- 概述
-
内联框架 inline frame；行盒 inline，同<img>一样，可以设置宽度
在当前H5网页中嵌入网内或网外其他页面，如各大邮箱门户网站；有利于页面集成/模块复用，如顶部的导航栏、底部的版权信息栏
除了嵌入页面，还可以嵌入PDF文件，实现在线预览的功能
Web开发中最古老、最简单的内容嵌入技术之一，时至今日仍被使用
每个<iframe>元素形成自己的窗口，即有自己的window对象
重载页面时不需要重载整个页面，只需要重载页面中的一个框架页
超宽屏系统监测时，除了使用多信源，还可以使用<iframe>
框架开发中，由于广泛采用了组件策略，很少使用该技术
应提前制作好被嵌入的页面
<iframe src="" frameborder="0"></iframe>
| 类别 |
说明 |
| src |
内框架的目标地址 |
| frameborder |
是否显示边框，1|yes,0|no |
| name |
框架名字，方便js操作；给<a>提供链接 |
| scrolling |
超过默认大小时，是否滚动，默认带滚动yes；no不带滚动 |
| width |
框架宽度，不带单位，建议使用css设置 |
| height |
框架高度，不带单位，建议使用css设置 |
| title |
框架提示信息，桌面端应用建议加上该属性 |
- []引用B站视频-分享-嵌入代码[]
-
默认自动静音播放
不自动播放 - 在 src 属性中拼接 autoplay=0
- []嵌入PDF[]
-
适合桌面端；移动端会提示会自动下载
还可以使用专门的js库在线预览
<iframe src="xxx.pdf" frameborder="0"></iframe>
- 模块复用
-
多次使用某个功能模块，如导航、版权等重复性内容
可以和当前页面交换数据/动态复用；也可以单纯的复用模块/静态复用
为完整显示加载页面,避免出现滚动条，通常根据加载页面的大小，指定框架的高度；也使用onload动态获取高度；实际渲染效果，受页面加载影响
利用CSS指定高度加载；还应该考虑媒体自适应/适配不同终端的情况
- [] 复用底部footer
-
1.新建H5项目
2.准备底部 footer.html，使用<footer>展示版权信息或使用lorem占位符代替，并使用CSS水平居中
footer {
text-align: center;
}
3.新建html页面，如index.html，添加<iframe>并指定src为footer.html；注意路径的使用
<iframe src="./footer.html" frameborder="1"></iframe>
4.设置<iframe>样式，如宽度100%，更加符合目标页面的需要
iframe {
width: 100%;
}
5.在index.html中右键单击，选择open with live server，打开浏览器，查看页面渲染效果
6.改进
嵌入页面内容过多时，超过默认大小，出现滚动条，影响用户体验
取消<iframe>的默认滚动条[设置scrolling='no']
7.指定高度 - 在index.html中检查<iframe>实际高度并设置其CSS样式
iframe {
width: 100%;
height: 300px;//
}
或：使用内联事件onload动态设置 - 推荐
<iframe src="xxx.html" name="cont" frameborder="0" scrolling="no"></iframe>
或：使用js动态设置 - 获取元素，设置样式；请参考上述内联事件完成
- 按需加载
- <a>中，href属性指定的内容，可以设置target属性，指定内容打开的位置；可以在当前页面打开，也可以在新页面打开，还可以在<iframe>中打开
- 利用这个特点，可以动态/按需加载页面
- [] 按需加载
-
1.新建H5项目
2.创建诺干需要加载的.html测试页面，内容可以使用占位符lorem代替
3.新建index.html文件
4.添加<iframe>，指定name属性为cont，并设置其样式，如宽度、高度
<iframe src="xxx.html" name="cont" frameborder="0" scrolling="no"></iframe>
5.添加诺干<a>，分别指定href属性为对应的.html测试页面，指定target为<iframe>的name：cont
<a href="./table.html" target="cont">table</a>
6.调整各页面样式至合适
7.在index.html中，右键单击，选择open with live server，打开浏览器，单击<a>，查看页面动态加载效果
- 安全域 Domain
- [] 跨域加载
- 加载百度到当前域名网站内，会提示如下信息，表示百度被设置为禁止内嵌
- [ ]如果百度在其网站内部设置了恶意代码。。。
-
<iframe src="https://www.baidu.com" frameborder="0" scrolling="no" title="baidu"></iframe>
Refused to display 'https://www.baidu.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
- sandbox
- <iframe>的安全属性，对其使用进行限制
- script脚本不能执行
- 不能发送ajax请求
- 不能使用本地存储，即localStorage,cookie等
- 不能创建新的弹窗和window
- 不能发送表单
- 不能加载额外插件比如flash等
-
| 类别 |
说明 |
| "" |
启用所有限制条件 |
| allow-same-origin |
允许将内容作为普通来源对待。如果未使用该关键字，嵌入的内容将被视为一个独立的源 |
| allow-top-navigation |
嵌入的页面的上下文可以导航（加载）内容到顶级的浏览上下文环境（browsing context）
如果未使用该关键字，这个操作将不可用
|
| allow-forms |
允许表单提交 |
| allow-scripts |
允许脚本执行 |
- 同域-In/Same Domain
-
协议相同
域名相同
端口相同
目的：保证用户信息的安全，防止恶意的网站窃取数据
非常必需；否则 Cookie 可以共享，互联网就毫无安全可言
可以简单理解为是同一个网站/域名/网站内部
- 跨域-Cross Domain
-
不同的网站/域名
默认情况下，仅仅支持同域页面加载，跨越加载会告警
同域情况下，父窗口和子窗口可以互相通信；如果跨域，则无法通信
http://www.example.com/dir/page.html
协议：http
域名：www.example.com
端口：80（默认端口，可以省略）
http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）
https://www.example.com/dir/page.html：不同源（协议不同）
- 其它使用
-
当前页面可以访问加载页面的DOM和cookie
let iframe = document.getElementById("footer");
iframe.onload = function () {
let doc = iframe.contentWindow.document;
console.log(doc.getElementById('author').innerHTML);
console.log(document.cookie);
}