@iframe

概述
模块复用
按需加载
安全域

概述

. inline frame；inline，同<img>一样，可以设置宽度

. 在当前H5网页中嵌入网内或网外其他页面，如各大邮箱门户网站；有利于页面集成/模块复用，如顶部的导航栏、底部的版权信息栏

. 除了嵌入页面，还可以嵌入PDF文件，实现在线预览的功能

. Web开发中最古老、最简单的内容嵌入技术之一，时至今日仍被使用

. 默认大小是300*150

. 每个<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站视频-分享-嵌入代码

[]嵌入PDF

.适合桌面端；移动端会提示会自动下载

.使用专门的js库在线预览

<iframe src="xxx.pdf" frameborder="0"></iframe>

模块复用

. 多次使用某个功能模块，如导航、版权等重复性内容

. 可以和当前页面交换数据/动态复用；也可以单纯的复用模块/静态复用

. 为完整显示加载页面,避免出现滚动条，通常根据加载页面的大小，指定框架的高度；也使用onload动态获取高度；实际渲染效果，受页面加载影响

. 利用CSS指定高度加载；还应该考虑媒体自适应/适配不同终端的情况

[] 复用底部footer-静态复用

阶段1

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>添加宽度样式，更加符合目标页面的需要

iframe {
  width: 100%;
}

5. 在index.html中右键单击，选择open with live server，打开浏览器，查看页面渲染效果

阶段2

. 嵌入页面内容过多时，超过默认大小，出现滚动条，影响用户体验

1. 取消<iframe>的默认滚动条[设置scrolling='no']

2. 在目标页中使用CSS指定嵌入页面内容的实际高度，也可以使用js动态获取

[]

. 如何知道嵌入页面高度?

. 如果嵌入页面的内容高度是300px，那么目标页面设置的高度是多少?为什么?怎么处理?

iframe {
  width: 100%;
  height: 300px;//
}

按需加载

说明

. <a>中，href属性指定的内容，可以在当前页面打开，也可以在新页面打开，还可以在<iframe>中打开；利用这个特点，可以动态/按需加载页面

[] 按需加载

1. 新建H5项目

2. 创建诺干需要加载的.html页面，内容以占位符lorem代替

3. 新建index.html文件，添加<iframe>，指定name属性为cont，并设置其样式，如宽度、高度

4. 在<iframe>上方继续创建诺干<a>，分别指定href属性为对应的.html页面，指定target为<iframe>的name：cont

参考HTML

<a href="./table.html" target="cont">table</a>
//...
<iframe src="xxx.html" name="cont" frameborder="0" scrolling="no"></iframe>

5. 调整各页面样式至合适；在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);
}

总结与作业 Summary & Homework

总结: . <iframe>的同域使用; . 使用iframe要防止被iframe：页面被运行商劫持了，被挂上/注入不知名的野鸡广告

. 很多非法网站让人防不胜防的小广告，大多都是iframe实现的
作业: . 使用<iframe>制作底部版权信息来优化个人网站