js学习笔记:操作iframe

从而禁止iframe嵌入自己的网站

四、iframe的onload事件

iframe也有onload事件,即加载完触发的事件,不过,IE浏览器不止onload直接触发,需要使用ie事件操作处理程序。

window.onload = function(){
    var iframe = document.createElement("iframe");
    iframe.src = "./iframe1.html";
    document.body.appendChild(iframe);
    iframe.onload = function(){
        alert("iframe loaded");
    }
    //对于ie浏览器,需要使用attachEvent()
    iframe.attachEvent('onload', function(){
        alert("iframe loaded");
    })
}

金沙官网线上 1

五、网站防钓鱼处理方法(防被嵌套)

有些不法人们利用iframe制作出一些类似官网的网站,当用户输入信息的时候,信息被不法分子获取到,这个网站就叫做钓鱼网站,当然,用户就是那条鱼。这种制作方式简单,快速,直接通过iframe引入一个网站即可,然后修饰一下边框之类,这样用户输入之后,通过js就能获取到用户的信息了。

那么,如何防止网站被钓鱼呢?方法也很简单,判断引入该框架的网站是不是我们自己的网站:

新建文件:iframe2.html

//iframe2.html
if(window != window.top){
    window.top.location.href = "http://baidu.com";
}

Demo地址:点击这里

这样通过判断iframe是不是被嵌套即可,如果被嵌套,则iframe的window和window.top不相同,此时让window.top进行跳转到真正的页面,就达到了防被嵌套的效果。

对其搜索找到了答案:https://stackoverflow.com/questions/37799258/content-security-policy-directive-frame-ancestors-self

六、动态设置iframe的高度

默认情况下,嵌套iframe之后,iframe不会自动撑开,而是出现滚动条,就像这样,我创建的是一个200*200的盒子:

金沙官网线上 2

金沙官网线上,那么,该如何让ifram的高度自适应呢,下面是一些实践:

第一步:去掉滚动条

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

第二步:通过contentWindow获取iframe的offsetwidth,设置给height:

var iframe = document.getElementById("iframe");
var idoc = iframe.documentWindow.document;
iframe.height = idoc.body.offsetHeight;

Demo测试地址:点击这里

金沙官网线上 3

今天就总结一下操作iframe的方法,以及平时的一些使用。

该网站设置了响应头frame-ancestors 'self',

参考链接

妙味课堂-视频问题解答-操作iframe
Iframe 有什么好处,有什么坏处?国内还有哪些知名网站仍用Iframe,为什么?有哪些原来用的现在抛弃了?又是为什么?

文章转自:绿岛之北

绿岛之北:http://wp.me/p6x6a2-tP

本文由金沙官网线上发布于Web前端,转载请注明出处:js学习笔记:操作iframe

您可能还会对下面的文章感兴趣: