iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载、安全问题、兼容性问题、搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求、制作富文本编辑器、历史记录管理、长连接、无刷新文件上传等方面,可参考一下知乎的这个回答:Iframe 有什么好处,有什么坏处?国内还有哪些知名网站仍用Iframe,为什么?有哪些原来用的现在抛弃了?又是为什么?

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

知识点汇总

有些事情平时不用太容易忘了,所以最好在每次学其他知识的时候汇总一下其他相关的知识,把这些知识融汇一下,可能有其他收获。

document;                 // 整个页面文档
document.documentElement; // 页面的html容器
document.body; // 页面的body
document.defaultView; // 获取window对象,FF、chrome、ie9+

一、获取iframe的内容

如果要获取iframe中的内容,需要使用document.contentWindow属性,以及contentDocument属性

  • document.contentWindow 获取子窗口的window对象,ie、ff、chrome都支持,chrome需要在服务器端才能使用
  • document.contentDocument 获取子窗口的document对象,(ie6、7不支持)ie8+、ff、chrome支持,chrome需要在服务器端测试

如下,测试:

新建文件:index.htmliframe1.html

//index.html
<button>变色</button>
<iframe src="./iframe1.html"></iframe>
<script>
window.onload = function(){
var btn = document.getElementsByTagName("button")[0];
var iframe = document.getElementById("iframe1");
btn.onclick = function(){
iwindow = iframe.contentWindow;
idoc = iwindow.document;
console.log("window",iwindow);//获取iframe的window对象
console.log("document",idoc); //获取iframe的document
console.log("html",idoc.documentElement);//获取iframe的html
console.log("head",idoc.head); //获取head
console.log("body",idoc.body); //获取body
idoc.body.style.color = "red"; //设置字体颜色
}
}
</script>
//iframe1.html
<p>test test</p>

Demo测试地址:点击这里

这样我们就获取到了iframe中的一些对象:

二、通过iframe设置本页面内容

通过iframe获取其父容器的window属性,通过window.parentwindow.top

  • window.parent 直接获取父元素的window,如果父元素还是iframe,那就是该iframe的window对象
  • window.top 获取最顶层的容器的window对象

此外,还有一个window.self属性

  • window.self 对对象自身的引用,如下测试:

在index.html以及iframe.html中增加代码

//index.html
//iframe window
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
var ibtn = idoc.getElementsByTagName("button")[0];
ibtn.onclick = function(){
console.log("self--", iwindow.self);
console.log("parent--", iwindow.parent);
console.log("top--", iwindow.top);
console.log(iwindow.top === iwindow.parent);
console.log(iwindow.self === iwindow.top);
window.parent.document.body.style.color = "red";
}
//iframe1.html
<button>改变</button>

Demo测试地址,点击这里

三、多个iframe

如果页面中嵌套的iframe很少甚至说没有iframe,此时,window.top、window.self、window.parent都是指向一个window。

如果页面中有多层次的iframe潜逃,那么window.parent、window.top的作用就比较突出了。

四、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");
})
}

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

有些不法人们利用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进行跳转到真正的页面,就达到了防被嵌套的效果。

六、动态设置iframe的高度

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

那么,该如何让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测试地址:点击这里

参考链接

妙味课堂-视频问题解答-操作iframe

Iframe 有什么好处,有什么坏处?国内还有哪些知名网站仍用Iframe,为什么?有哪些原来用的现在抛弃了?又是为什么?

文章转自:绿岛之北

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

js学习笔记:操作iframe的更多相关文章

  1. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  2. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  3. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

  4. 一点感悟:《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

  5. JS学习笔记5_DOM

    1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...

  6. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  7. 【转】Backbone.js学习笔记(二)细说MVC

    文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

  8. Node.js学习笔记(3):NPM简明教程

    Node.js学习笔记(3):NPM简明教程 NPM常用操作 更新NPM版本 npm install npm -g -g,表示全局安装.我们可以指定更新版本,只需要在后面填上@版本号即可,也可以输入@ ...

  9. Node.js学习笔记(2):基本模块

    Node.js学习笔记(2):基本模块 模块 引入模块 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式.在No ...

  10. Node.js学习笔记(4):Yarn简明教程

    Node.js学习笔记(4):Yarn简明教程. 引入Yarn NPM是常用的包管理工具,现在我们引入是新一代的包管理工具Yarn.其具有快速.安全.可靠的特点. 安装方式 使用npm工具安装yarn ...

随机推荐

  1. 转 Android的消息处理机制(图+源码分析)——Looper,Handler,Message

    作为一个大三的预备程序员,我学习android的一大乐趣是可以通过源码学习google大牛们的设计思想.android源码中包含了大量的设计模式,除此以外,android sdk还精心为我们设计了各种 ...

  2. 最清晰的ios消息推送机制教程

    研究了一下Apple Push Notification Service,实现的很简单,很环保.原理如下 财大气粗的苹果提供了一堆服务器,每个ios设备和这些服务器保持了一个长连接,ios版本更新提示 ...

  3. C# 的 WCF文章 消息契约(Message Contract)在流(Stream )传输大文件中的应用

    我也遇到同样问题,所以抄下做MARK http://www.cnblogs.com/lmjq/archive/2011/07/19/2110319.html 刚做完一个binding为netTcpBi ...

  4. grok 正则也支持常规正则

    2016-08-29 17:40:01,19 INFO com.zjzc.common.utils.HttpUtil - 请求接口: https://www.zjcap.cn/pay/interfac ...

  5. 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换算法(android)

    final double x_pi = 3.14159265358979324 * 3000.0 / 180.0; public GeoPoint bd_encrypt(GeoPoint point) ...

  6. 走进C标准库(5)——&quot;stdio.h&quot;中的其他部分函数

    函数介绍来自:http://ganquan.info/standard-c/ 函数名: freopen 功  能: 替换一个流 用  法: FILE *freopen(char *filename, ...

  7. DBNull

    1. Null不是0.不是空,是"不知道".数据库中int是可以为null的,但是C#中int不可以为null,存在一个不匹配的问题. 2. 介绍"可控数据类型" ...

  8. 为Github项目创建文档

    有两种编写方式: In reStructuredText In Markdown In reStructuredText  工具:  pip install sphinx sphinx-autobui ...

  9. Jmeter之http性能测试实战 非GUI模式压测 NON-GUI模式 结果解析TPS——干货(十一)

    性能测试计划 性能测试用例 录制脚本 性能测试结果 性能测试报告 性能测试监控报告 准备工作 从脚本已录制成功之后开始进行压测 安装Jmeter拓展插件 查看 Transactions per Sec ...

  10. Jupyter Notebook插入图片的4种方法

    来自:https://blog.csdn.net/qq_33039859/article/details/78507316 方法1: ![title](img/python.png) Markdown ...