获取iframe的window对象
在父窗口中获取iframe中的元素
// JS
// 方法1:
var iframeWindow = window.frames["iframe的name或id"];
iframeWindow.document.getElementById("iframe中控件的ID");
// 方法2:
var iframeWindow = document.getElementById("iframe的name或id").contentWindow;
iframeWindow.document.getElementById("iframe中控件的ID");
// Jquery
// 方法1:
$("#iframe的ID").contents().find("#iframe中的控件ID");
// 方法2:
$("#iframe中的控件ID", document.frames("iframe的name").document);
在iframe中获取父窗口的元素
// JS获取父窗口
var parentWindow = window.parent;
var parentDocument = window.parent.window;
var parentElement = window.parent.document.getElementById("父窗口的元素ID");
// JS获取顶层窗口
var topWindow = window.top;
// Jquery获取父窗口
$('#父窗口中的元素ID', parent.document).click();
以下内容转载自 https://blog.csdn.net/blog4j/article/details/8501452
1. 获得iframe的window对象
存在跨域访问限制。
chrome:iframeElement. contentWindow
firefox: iframeElement.contentWindow
ie6:iframeElement.contentWindow
文章Iframes, onload, and document.domain中说“he iframe element object has a property called contentDocument that contains the iframe’s document object, so you can use the parentWindow property to retrieve the window object.”意思就是一些浏览器可以通过iframeElement.contentDocument.parentWindow获得iframe的window对象。但经过测试firefox、chrome的element.contentDocument对象没有parentWindow属性。
function getIframeWindow(element){
return element.contentWindow;
//return element.contentWindow || element.contentDocument.parentWindow;
}
2. 获得iframe的document对象
存在跨域访问限制。
chrome:iframeElement.contentDocument
firefox:iframeElement.contentDocument
ie:element.contentWindow.document
备注:ie没有iframeElement.contentDocument属性。
var getIframeDocument = function(element) {
return element.contentDocument || element.contentWindow.document;
};
3. iframe中获得父页面的window对象
存在跨域访问限制。
父页面:window.parent
顶层页面:window.top
适用于所有浏览器
4. 获得iframe在父页面中的html标签
存在跨域访问限制。
window.frameElement(类型:HTMLElement),适用于所有浏览器
5. iframe的onload事件
非ie浏览器都提供了onload事件。例如下面代码在ie中是不会有弹出框的。
var ifr = document.createElement('iframe');
ifr.src = 'http://www.b.com/index.[php](http://www.2cto.com/kf/web/php/)';
ifr.onload = function() {
alert('loaded');
};
document.body.appendChild(ifr);
但是ie却又似乎提供了onload事件,下面两种方法都会触发onload
//方法一:
<iframe οnlοad="alert('loaded');" src="http://www.b.com/index.php"></iframe>
//方法二:
//只有ie才支持为createElement传递这样的参数
var ifr = document.createElement('<iframe οnlοad="alert('loaded');" src="http://www.b.com/index.php"></iframe>');
document.body.appendChild(ifr);
由于iframe元素包含于父级页面中,因此以上方法均不存在跨域问题。
实际上IE提供了onload事件,但必须使用attachEvent进行绑定。
var ifr = document.createElement('iframe');
ifr.src = 'http://b.a.com/b.php';
if (ifr.attachEvent) {
ifr.attachEvent('onload', function(){ alert('loaded'); });
} else {
ifr.onload = function() { alert('loaded'); };
}
document.body.appendChild(ifr);
6. frames
window.frames可以取到页面中的帧(iframe、frame等),需要注意的是取到的是window对象,而不是HTMLElement。
var ifr1 = document.getElementById('ifr1');
var ifr1win = window.frames[0];
ifr1win.frameElement === ifr1; // true
ifr1win === ifr1; // false
获取iframe的window对象的更多相关文章
- JQuery获取iframe中window对象的方法-contentWindow
document.getElementsByTagName('iframe')[0].contentWindow 获取到的就是iframe中的window对象.
- html,获取iframe的window,document,自定事件与iframe通信
获取iframe的window对象js代码如下.注意:一定要在文档加载完成之后,才能获取到 var Iframe=document.getElementById("script" ...
- IFrame与window对象(contentWindow)
ref:http://blog.csdn.net/dongzhiquan/article/details/5851201 var detialIframe=document.all("det ...
- IE8下获取iframe document EVENT对象的问题
在一个页面中设置iframe的document Onclick 事件获取在iframe中的document被点击的对象,W3C如下: document.getElementById('iframe的I ...
- js获取iframe的parent对象
使用谷歌浏览器调试代码时无意间发现了一个奇特的问题:从iframe页面调用父级页面的方法,window.parent.text(),出现 Blocked a frame with origin &qu ...
- iframe和window对象的关系
浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象.但是,如果一个文档定义了一个或多个框架(即,包含一个或多个 frame 或 iframe 标签),浏览器就会为原始文档创建一个 ...
- 怎样快捷获取网页的window对象
使用document.defaultView; document.defaultView === window 注意: 1. 如果当前文档不属于window对象, 则返回null; 2. docume ...
- 在iframe中获取iframe外的对象
parent.document.getElementById("dom ID"); $($(parent.document.getElementById("video-i ...
- jQuery获取iframe的document对象
$(function() { var result = $('#myframe').prop('contentWindow').document; console.log(result); }); 这 ...
随机推荐
- unittest 测试用例实现
unittest框架结构 test_case: 测试套件,每一个.py文件代表一个测试用例,测试用例以test开头,否则框架读取不到测试用例 __init__.py是做什么的? 要弄明白这个问题,首先 ...
- 【bjdctf】 BJD hamburger competition
是一个游戏 静态分析和动态分析都没思路 尝试查看运行时动态链接库 其中assembly-csharp.dll可能为实现游戏功能的动态链接库 .net逆向 Dnspy反编译 关键代码如上 Getflag ...
- elasticsearch 索引数据多了怎么办,如何调优,部署 ?
面试官:想了解大数据量的运维能力. 解答:索引数据的规划,应在前期做好规划,正所谓"设计先行,编码在后", 这样才能有效的避免突如其来的数据激增导致集群处理能力不足引发的线上客户 ...
- 学习Kvm(一)
背景介绍 传统数据中心面临的问题: 资源使用率低 资源分配不均 自动化能力差 初始化成本高 云计算: 云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问, 进入可配置的计 ...
- ACM - 图论- 网络流 - 算法模板
\(EK\) 算法模板 #include <iostream> #include <queue> #include<string.h> using namespac ...
- 插值方法 - Newton向前向后等距插值
通常我们在求插值节点的开头部分插值点附近函数值时,使用Newton前插公式:求插值节点的末尾部分插值点附近函数值时,使用Newton后插公式. 代码: 1 # -*- coding: utf-8 -* ...
- jupyter notebook使用技巧
shift + tab 键可以查看对应源代码(注意:需要先将代码运行才能查看) Jupyter Notebook 的快捷键 Jupyter Notebook 有两种键盘输入模式:1.命令模式,键盘输入 ...
- AWS 6R
"The 6 R's": 6 Application Migration Strategies "The 6 R's": 6 Application Migra ...
- css写作建议和性能优化小结
1.前言 还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于css,很多开发者的想法就是,cs ...
- html5系列:form 2.0 新结构
以往的一个form表单,结构比较死板,所有的form元素都必须处在<form>和</form>之间才有效,这会造成一些麻烦,比如说:像bootstrap这种使用<div& ...