iframe的坑总结

前端美少女战士
353 阅读2分钟

1.如何检查系统是否是通过 iframe 访问

通过比较window.slef(当前窗口对象)与window.top(顶层窗口对象)是否一致

if(window.self !== window.top){

// 检测到嵌套

}

2.如何禁止网页被iframe嵌套

解决方案：

  1. 在服务器设置X-Frame-Options响应头

这个方法是最安全可靠的方法之一。X-Frame-Optiond响应头允许网站指定哪些网站可以嵌套当前网站，从而有效地防止恶意攻击。

只需在服务端添加以下配置即可，这会防止当前网站被任何网站嵌套：

X-frame-Options：DENY

如果你需要允许特定的网站嵌套当前网站，可以使用以下配置，这样就可以允许example.com 网站嵌套当前网站。：

X-Frame-Options: ALLOW-FROM https://example.com/

属性：

DENY: 禁止所有页面在 iframe 中嵌套，无论来源域名是什么。

SAMEORIGIN: 允许同源页面在 iframe 中嵌套，但禁止不同源的页面进行嵌套。

allow-from XXX.com: 允许被指定域名的网站嵌套。

  1. 在前端使用js限制页面被iframe嵌套

在js中使用window对象的top属性检查当前页面是否在顶层窗口打开。如果不是，则表示该页面被嵌套在iframe中：

if(top !== window){
    // 页面被嵌套在 iframe 中，执行相关操作
}

3.iframe的透明问题

除了IE浏览器，其他标准浏览器默认iframe是透明的。

对应IE7+的浏览器：加个 allowtranparency="true"

<iframe allowtransparency="true" src="ifrm.html"></iframe>

对应ie6还要设置iframe页面的body背景透明

 <body style="background-color:transparent;">
    <iframe allowtransparency="true" src="ifrm.html"></iframe>
 </body>

4.去边框，滚动条等

边框：ie需设置iframe的frameborder="no"或者frameborder="0"实现，除了ie，其他浏览器可以使用css的border:none;实现。

滚动条：隐藏滚动条可以用scrolling="no"（此方式兼容所有的浏览器） 于是兼容的写法如下：

<iframe allowtransparency="true" src="ifrm.html" style="border:none;" frameborder="no" scrolling="no"></iframe>

5.iframe自适应宽高度（注:iframe的默认尺寸是300*150px）

方法是在iframe文档的onload加载句柄里做

<iframe id="myifrm" onload="this.height=myifrm.document.body.scrollHeight;" allowtransparency="true" src="ifrm.html" scrolling="no" style="border:none;" frameborder="no"></iframe>

把iframe里的页面的高度赋值给iframe框架窗口高度。

这里再提供一个网上写好的一个函数：

function iFrameHeight() {
    var ifm= document.getElementById("myifrm");
    var subWeb = document.frames ? document.frames["myifrm"].document : ifm.contentDocument;
    if(ifm != null && subWeb != null) {
        ifm.height = subWeb.body.scrollHeight;
    }
}


<iframe id="myifrm" onload="iFrameHeight();" allowtransparency="true" src="ifrm.html" scrolling="no" style="border:none;" frameborder="no"></iframe>

在onload里处理有个问题，就是无法应对ifrm页面里内容变动引起高度变化，简单说，比如tab页签，2个tab页高度不一样，切换时就有问题了。

在其他博客看到，通过定时执行以下的方法：

window.setInterval("iFrameHeight()", 200);
avatar
文章
阅读
粉丝