iframe知识点详解

Posted 2021-10-30 sarah-wen

<iframe>标签规定一个内联框架，一个内联框架被用来在当前html文档中嵌入另一个文档。

1. 常用属性

2. 主要API

3. 轮询

4. 长轮询

5. 自适应

6. 安全性

7. 跨域问题

8. 优缺点

1. 常用属性

(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)。

2. 获取iframe里面内容的主要API。

contentWindow(获取window对象)

contentDocument(获取document对象)

let iframe = document.getElementById(‘demo‘);
let iwindow = iframe.contentWindow; // 获取iframe的window对象
let idoc = iframe.contentDocument; // 获取iframe的document对象
也可以使用name属性

let iframe = window.frames[‘demo‘]

iframe使用父级内容的正确姿势

我们通过window.self，window.parent，window.top这三个属性分别获取自身window对象，父级window对象，顶级window对象。

 

iframe1.self === iframe1
iframe1.parent === iframe2
iframe2.parent === window
iframe1.top === window

 

3. 长轮询(异步操作)

ajax中，长轮询就是在ajax的readyState=4时，再次执行原函数即可。

这里使用iframe也是一样，异步创建iframe,然后reload.

var iframeCon = docuemnt.querySelector(‘#container‘),
        text; //传递的信息
    var iframe = document.createElement(‘iframe‘),
        iframe.id = "frame",
        iframe.style = "display:none;",
        iframe.name="polling",
        iframe.src="target.html";
    iframeCon.appendChild(iframe);
    iframe.onload= function(){
        var iloc = iframe.contentWindow.location,
            idoc  = iframe.contentDocument;
        setTimeout(function(){
            text = idoc.getElementsByTagName(‘body‘)[0].textContent;
            console.log(text);
            iloc.reload(); //刷新页面,再次获取信息，并且会触发onload函数
        },2000);
    }

 

5. 自适应

不是在某个div下嵌套就行了吗？
要知道，广告是与原文无关的，这样硬编码进去，会造成网页布局的紊乱,而且,这样势必需要引入额外的css和js文件，极大的降低了网页的安全性。 这些所有的弊端，都可以使用iframe进行解决。 
我们通常可以将iframe理解为一个沙盒，里面的内容能够被top window 完全控制，而且，主页的css样式是不会入侵iframe里面的样式，这些都给iframe的广告命运埋下伏笔。可以看一下各大站点是否都在某处放了些广告，以维持生计比如:W3School
但，默认情况下，iframe是不适合做展示信息的，所以我们需要对其进行decorate.

自适应： 默认情况下，iframe会自带滚动条，不会全屏，如果想自适应iframe，第一步，去掉滚动条

<iframe src="./iframe1.html" id="iframe1" scrolling="no"></iframe>

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

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

还有一些装饰属性

allowtransparency：true or false  是否允许iframe设置为透明，默认为false
allowfullscreen：true or false    是否允许iframe全屏，默认为false

6. 安全性

一个是你的网页被别人iframe,一个是你iframe别人的网页。

很多*网站都会有各种让人防不胜防的小广告，它们大多就是用通过iframe实现的，本来想点击某个播放按钮，结果直接跳几十跳不知道去了哪个新世界去了。

更讨厌的一种情况是，可能不知道哪天用户突然拿刀过来，说我们的项目页面里出现了野鸡广告，说我们在消费他们，一脸懵逼的我们觉得十分无辜。实际上就是我们的页面被运行商劫持了，被挂上了注入了不知名的野鸡广告。

防嵌套

window.top来防止我们的页面被嵌套

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

或通过window.location.host

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

X-Frame-Options ，X-Frame-Options是一个相应头，主要是描述服务器的网页资源的iframe权限，其实就是将前端js对iframe的把控交给服务器来进行处理。

CSP之页面防护，和X-Frames-Options一样，都需要在服务器端设置好相关的Header. CSP 的作用， 真的是太大了，他能够极大的防止你的页面被XSS攻击，而且可以制定js,css,img等相关资源的origin，防止被恶意注入。不过他的兼容性，也是渣的一逼。目前支持Edge12+ 以及 IE10+。 

7. 跨域问题

(1) document.domain

对于主域相同子域不同的两个页面，我们可以通过document.domain+iframe来解决跨域通信问题

例子：网页a(http://a.ab.com)和网页b(http://b.ab.com),两者都设置document,domain = ‘ab.com‘,这样浏览器就会认为他们是用一个域下，然后在网页a上创建iframe，就可以上网页b了。

网页a

document.domain = ‘ab.com‘;
var ifr = document.createElement(‘iframe‘);
ifr.src = ‘http://b.ab.com‘;
ifr.style.display = ‘none‘;
document.body.appendChild(ifr);
ifr.onload = function(){
    let doc = ifr.contentDocument || ifr.contentWindow.document;
    // 在这里操纵b.html
};

网页b

document.domain = ‘ab.com‘;

(2)  postMessage 是html5新特性

网页a

document.domain = ‘ab.com‘;
var ifr = document.createElement(‘iframe‘);
ifr.src = ‘http://b.ab.com‘;
ifr.style.display = ‘none‘;
document.body.appendChild(ifr);
// 发送数据
ifr.postmessage(‘hello, I`m a‘, ‘http://b.ab.com‘);

网页b

// 监听message事件
window.addEventListener(‘message‘, receiver, false);
function receiver(e) {
    if (e.origin == ‘http://a.ab.com‘) {
        if (e.data == ‘hello, I`m a‘) {
            e.source.postMessage(‘hello, I`m b‘, e.origin);信息
        }
    }
}

8. 优缺点

优点 :

重载时不需要重载整个页面，只需要重载页面中的一个框架

方便开发，减少代码重复率（header footer）

缺点：(html5已经不支持这个标签)

会产生很多页面，不易于管理

多框架的页面会增加服务器的HTTP请求

浏览器的后退按钮无效