Web前端之【 iframe 】

2019/06/12 00:16
阅读数 25

iframe基本用法

1、最基本的用法

iframe 标签指定 src 

<iframe src="demo_iframe_sandbox.htm"></iframe>

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 src="./iframe1.html" id="iframe1" scrolling="no"></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 id="google_ads_frame2" name="google_ads_frame2" width="160" height="600" frameborder="0"src="target.html" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true"scrolling="no" allowfullscreen="true"></iframe>

 

获取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

 

2、跨域通讯之 postMessage

 postMessage ( message, targetOrigin ):

 

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

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

 

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

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

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

 

<iframe src="http://tuhao.com" name="sendMessage"></iframe>
//页面A let ifr = window.frames['sendMessage']; //使用iframe的window向iframe发送message。 ifr.postmessage('hello I'm a ', "http://tuhao.com");
//页面B 监听 message 事件 window.addEventListener('message', receiver, false); function receiver(e) { if (e.origin == 'http://tuhao.com') { if (e.data == 'give u a message') { e.source.postMessage('hello I'm b', e.origin); //向原网页返回信息 } else { alert(e.data); } } }

 

当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...进行错误捕获。如果发生错误,则说明不同域,表示你的页面被盗用了。这时候再进行跳转即可.

复制代码
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;
}
复制代码

(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不支持

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部