上一篇: html总结下一篇: select标签详解-关于下拉菜单的设置和取值

iframe学习

一、定义

​ iframe 元素会创建包含另外一个文档的内联框架,它的src属性规定在其内部显示的文档的url.

二、iframe用法

2.1iframe的主要属性

属性 描述
name iframe的名字,可以类比input,table标签的name
height
width
src 设置内部显示的文档的url
frameborder 是否显示框架周围的边框(0不显示)

2.2简单iframe使用

​ 在页面中添加iframe标签,并设置src="./inner/index.html",那么,简单的iframe嵌入就实现了.

//用nginx起当前页面服务
<!DOCTYPE html>
<html lang="en">
    <head>
        //meta标签,省略
    </head>
    <body>
        <iframe id="inner_iframe" src="./inner/index.html"></iframe>  
    </body>
</html>

​ 嵌入的iframe大小为300px*150px(谷歌浏览器和火狐上测得),可以像其他标签一样,通过id,class或者内联,外联的方式设置iframe的样式.

2.3父页面操作iframe

​ (1)获得iframe

var inner_iframe = document.getElementById('inner_iframe')   //像其他元素一样获取iframe

​ (2)获得iframe的文档对象

var doc = inner_iframe.contentWindow.document ||inner_iframe.contentDocument

​ (3)操作iframe的文档

doc.body.style.backgroundColor = 'red' //给iframe的body添加一个颜色

​ (4)获得iframe的window对象

var win = inner_iframe.contentWindow

​ (5)设置iframe里定义的某个全局变量的值(用于实现父页面和ifame之间的数据传递)

win.a = 1000   //此时iframe中变量a=1000

2.4iframe和父页面交互

​ (1)获得父页面引用

var parent = window.parent

​ (2)iframe和父页面的数据传递

parent.b = 1000   //此时父页面中变量b=1000

2.5iframe与父页面跨域交换数据

假设我的当前页面地址是:http://abc.com,内嵌一个iframe,src=http://aaa.abc.com,iframe和其父元素跨域,那么此时,利用contentWindow得到的iframe的window对象不可操作.如果需要交换数据,因为主域相同,可以考虑通过document.domain使父页面和iframe的domain一样,这样就可以自由地交换数据,要特别注意,domain不能随意设置,只能把document.domain设置成自身或更高一级的父域.

//页面
document.domain = 'abc.com'   //即使页面的domain就是'abc.com',也必须要这么设置,否则页面报错
var a = document.getElementById('aaa');
var win_a = a.contentWindow;
var data = {name: 'miki'};
a.onload = function () {
    win_a.data = data
}

//iframe aaa
document.domain = 'abc.com'
var data = {};

2.6iframe之间的交互

​ 假设页面http://abc.com有两个iframe,id分别为aaa和bbb,url分别为http://abc.com/inner/aaa.html,http://abc.com/inner/bbb.heml,现在,用户操作bbb之后,得到数据data={name: 'miki'},想要传输给aaa,应该怎么办?

​ 因为iframe aaa和bbb之间不能直接通信,但是,他们都能访问到共同的父页面,并且,主域相同的情况下还能传输数据,因此,利用这样的一个特点,两个iframe通过访问父页面,达到交换数据的目的.

//页面
var a = document.getElementById('aaa');
var b = document.getElementById('bbb');
var win_a = a.contentWindow;
var win_b = b.contentWindow;
var data = {};

document.addEventListener('message', function (e) {
    win_a.data = data;
})

//iframe aaa
var p = window.parent;
var data = {};

//iframe bbb
var p = window.parent;
var data = {};
setTimeout(function () {
    data = {name: 'miki'};
    p.postMessage(data, 'http://abc.com');
}, 5000)

注意:上例的父页面和两个iframe的域名相同,如果域名不相同,假设父页面的url仍然是http://abc.com,iframe aaa为http://aaa.abc.com,bbb的urlhttp://bbb.abc.com,那么,此时aaa和bbb交换数据,只需要在这三个html里面重新设置domaindocument.domain='abc.com'

特别注意:iframe和父页面只能同域,或者主域相同的情况下交换数据,否则,两者不能交换数据,因此,如果用iframe解决跨域问题,有一定的局限性.

2.7页面防iframe嵌套

通过判断当前的location是否是顶层的,即是否被嵌套到iframe里面了,如果是,则强制跳转。这是防止页面被iframe嵌套的一种常用手段.代码如下:

if (top.location != self.location) {
    top.location = self.location
}

防止强制跳转方法:增加两个属性:security="restricted" sandbox="",前者是IE的禁止js的功能,后者是HTML5的功能。刚好就可以让IE,Chrome,Firefox这三大浏览器都实现了禁止iframe的自动跳转。但这样iframe里面的所有js也不能用了。

上一篇: html总结下一篇: select标签详解-关于下拉菜单的设置和取值