Web前端之【 iframe 】

骑猪看日落 2021-11-15 13:58 300阅读 0赞

## iframe基本用法 ##

**1、最基本的用法**

iframe 标签指定 src

**2. 常用属性**

(1). frameborder　　 是否显示边框，1代表显示，0代表不显示

(2). height, width 　　高度 、宽度

(3). name 　　　　　框架的名字，可通过window.frames\[name\]被调用

(4). scrolling 　　　　框架是否滚动，yes no auto(需要时滚动)

(5). scr 　　　　　　 内框架中文档的URL，可以是页面地址也可以是图片地址。

(6). sandbox　　　 HTML5新特性，对iframe进行限制。IE10+支持。

(7). align　　　　　 规定如何根据周围的元素来对齐<iframe> (left right top middle bottom)。

**3、自适应 iframe**

默认情况下，iframe会自带滚动条，不会全屏.如果你想自适应iframe的话:

第一步：去掉滚动条

第二步,设置iframe的高为body的高

var iwindow = iframe.contentWindow;
    var idoc = iwindow.document;
    iframe.height = idoc.body.offsetHeight;

另外,还可以添加其它的装饰属性:

**allowtransparency** 　　 是否允许iframe设置为透明（true /false），默认为false

**allowfullscreen** 　　　 是否允许iframe全屏（true /false），默认为false

## 获取iframe里的内容 ##

**1、主要的两个API contentWindow，contentDocument**

iframe.contentWindow, 　　获取 iframe 的 window 对象

iframe.contentDocument, 　获取 iframe 的 document 对象

这两个 API 只是 DOM 节点提供的方式( 即 getELement 系列对象 )

var iframe = document.getElementById('demo');
    var iwindow = iframe.contentWindow; // 获取iframe的window对象
    var idoc = iframe.contentDocument; // 获取iframe的document对象

**2、通过 iframe 的 name 属性 调用 iframe。**

刚刚我们提到了，我们也可以通过window.frames\[iframeName\]来调用

**window.frames\[iframeName\]**

let iframe = window.frames['demo']

返回的就是window对象

## 在iframe中获取父级内容 ##

**1、在同域下，父页面可以获取子 iframe 的内容，子 iframe 同样也能操作父页面内容**。

window.parent 　 获取上一级的window对象，如果还是iframe则是该iframe的window对象
    window.top 　　  获取最顶级容器的window对象，即，就是你打开页面的文档
    window.self 　　 返回自身window的引用。可以理解 window===window.self

![1107362-20190611232043446-212066886.jpg][]

**2、跨域通讯之 postMessage**

**postMessage ( message, targetOrigin ):**

**message: 　　** 就是传递给iframe的内容, 通常是string,

**targetOrigin:** 接受你传递消息的域名，可以设置绝对路径，也可以设置 "*"* 或者 *"/" 。* 表示任意域名都行，"/" 表示只能传递给同域域名

postMessage 是 html5 的新特性 具体介绍请查看 [MDN postMessage][]

我们可以通过html5这个新特性进行iframe间的跨域通信，使用 **postMessage** 进行数据传递，通过 **Message** 监听通信事件

**postMessage**挂载到window对象上，即，使用window.postmessage() 调用.

当targetOrigin接受到message消息之后,会触发message事件。 message提供的event对象上有3个重要的属性，data,origin,source.

data：　 　 postMessage传递进来的值
    origin：　 发送消息的文档所在的域
    source：　 发送消息文档的window对象的代理，如果是来自同一个域，则该对象就是window，可以使用其所有方法，如果是不同的域，则window只能调用postMessage()方法返回信息

##  ##

## iframe 的安全问题 ##

iframe出现安全性有两个方面，一个是你的网页被别人 iframe,一个是你 iframe 别人的网页。

**1、防嵌套网页**

拦截 click 事件。iframe 享有着 click 的最优先权，当有人在伪造的主页中进行点击的话，如果点在iframe上，则会默认是在操作 iframe 的页面。

**（1）在前端领域，我们可以通过`window.top`来防止我们页面被嵌套。**

//iframe2.html
    if(window != window.top){
        window.top.location.href = correctURL;
    }

**（2）通过`window.location.host`来检测是否跨域了，限定你的网页不能嵌套在任意网页内**。如果你想引用同域的框架的话，可以判断域名。

if (top.location.host != window.location.host) {
    　　top.location.href = window.location.href;
    }

当然，如果你网页不同域名的话，上述就会报错。  
所以，这里可以使用try...catch...进行错误捕获。如果发生错误，则说明不同域，表示你的页面被盗用了。这时候再进行跳转即可.

![复制代码][copycode.gif]

try{
    　　top.location.hostname;  //检测是否出错
    　　//如果没有出错，则降级处理
    　　if (top.location.hostname != window.location.hostname) { 
    　　　　top.location.href =window.location.href;
    　　}
    }
    catch(e){
    　　top.location.href = window.location.href;
    }

![复制代码][copycode.gif]

**（3）在服务器上，对使用iframe的权限进行设置**

### X-Frame-Options ###

X-Frame-Options是一个响应头，主要是描述服务器的网页资源的 iframe 权限。目前的支持度是IE8+有3个选项:

DENY：　　　　　　当前页面不能被嵌套 iframe 里，即便是在相同域名的页面中嵌套也不允许,也不允许网页中有嵌套 iframe
    SAMEORIGIN：　　iframe 页面的地址只能为同源域名下的页面
    ALLOW-FROM：　　可以在指定的 origin url 的 iframe 中加载

实例：

X-Frame-Options: DENY
    拒绝任何iframe的嵌套请求
    
    X-Frame-Options: SAMEORIGIN
    只允许同源请求，例如网页为 foo.com/123.php，則 foo.com 底下的所有网页可以嵌入此网页，但是 foo.com 以外的网页不能嵌入
    
    
    X-Frame-Options: ALLOW-FROM http://s3131212.com
    只允许指定网页的iframe请求，不过兼容性较差Chrome不支持

转载于:https://www.cnblogs.com/Tanghongchang/p/11004361.html

[1107362-20190611232043446-212066886.jpg]: /images/20211115/c7cbb099b5474c568e03667192d06c25.png
[MDN postMessage]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
[copycode.gif]: /images/20211115/abf73c6e42cd4e5e876d98b6438f7e27.png