js操作iframe框架时应该屡清楚的一些概念
1、获取iframe的window对象
存在跨域访问限制。
iframeElement.contentWindow 兼容
2、获取iframe的document对象
存在跨域访问限制。
chrome: iframeElement.contentDocument
firefox: iframeElement.contentDocument
ie:iframeElement.contentWindow.document(ie没有iframeElement.contentDocument属性)
var getIframeDocument = iframeElement.contentDocument||iframeElement.contentWindow.document;
3、iframe中获得父页面的window对象
存在跨域访问限制。
父页面:window.parent 兼容
顶层页面:window.top 兼容
4、获取iframe在父页面中的html标签
存在跨域访问限制。
window.frameElement 兼容
5、iframe的onload事件
非ie浏览器都提供了onload事件。例如下面代码在ie中是不会有弹出框的。
var ifr = document.createElement('iframe');
ifr.src = 'http://www.b.com/index.php';
ifr.onload = function() {
alert('loaded');
};
document.body.appendChild(ifr);
但是ie却又似乎提供了onload事件,下面两种方法都会触发onload
方法一:
<iframe onload="alert('loaded');" src="http://www.b.com/index.php"></iframe>
方法二:
//只有ie才支持为createElement传递这样的参数
var ifr = document.createElement('<iframe onload="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
补充:
var iframeObj = document.getElementById('iframeid');
a:获取子页面中body里的内容
var iframeContent = iframeObj.contentWindow.document.body.innerHTML;
b:获取子页面中head里的内容
var iframeContent = iframeObj.contentWindow.document.head.innerHTML;
c:获取子页面中html里的内容
var iframeContent = iframeObj.cententWindow.document.documentElement.innerHTML;
d:获取子页面中某个元素里的内容
var iframeContent = iframeObj.contentWindow.document.getElementById('element_id').innerHTML;
js操作iframe框架时应该屡清楚的一些概念的更多相关文章
- 使用 Require.js 引用第三方框架时遇到的一些情况
使用 Require.js 引用第三方框架时遇到的一些情况 在使用Require.js解析依赖的时候,会出现以下几种情况: 程序中的依赖关系 当前程序 依赖于 B包, B包 依赖于 A包 A包与B包两 ...
- 原生JS操作iframe里的dom
转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...
- JS 操作iframe
很多人一直都有个想法,要是可以随心所欲的操作iframe就好了.这样静态页面也就有了相当于后台动态页面php,jsp,asp中include,require实现统一多页面布局的能力. 通过Javasc ...
- [置顶] js操作iframe兼容各种浏览器
在做项目时,遇到了操作iframe的相关问题.业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数.于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终 ...
- JS操作iframe
1. 获得iframe的window对象 存在跨域访问限制. chrome:iframeElement. contentWindow firefox: iframeElement.contentWin ...
- 使用iframe框架时,实现子页面内跳转到整个页面,而不是在子页面内跳转
首先先来描述一下我所遇到的问题,我在一个首页的index.jsp页面中用到了iframe框架,见下图 在iframe中引入jsp页面的路径,是几个iframe框架组合成的一个完整的页面,但是他们的存在 ...
- js操作iframe总结
一 在父页面操作子页面 IE下操作IFrame内容的代码: document.frames["MyIFrame"].document.getElementById(" ...
- JS操作frame框架
1 框架编程概述 一个Html 页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一 个独立的Html 页面.这里所讲的框架编程包括框架的自我控制以及框架之间的互相访 ...
- 如何通过js获取iframe框架中的内容
在父窗口中获取iframe中的元素 IE下:格式:window.frames["iframe的name值"].document.getElementById("ifram ...
随机推荐
- xml入门简介--两天学会xml
前言 在很久以前,笔者曾见到过1000+页的xml书,里面还有n多的概念,XSL,Xquery,让人头痛.无奈最近需要用到,所以在w3c恶补了一下.以下大致整理了一下相关概念,但是对XSL等派生语言没 ...
- webservice和.net remoting浅谈
服务器端向客户端发送一个进程编号,一个程序域编号,以确定对象的位置. webservice和.net remoting都是用来通信的框架,它们最大的优点是可以像调用本地对象一样调用远程对象,比如: ...
- Windows Phone 学习教程(一)
http://www.cnblogs.com/webabcd/category/385852.html Windows Phone 7 教程 Windows Phone 8.1 Windows Pho ...
- OC对象:封装、继承、多态的使用举例一
// 该代码在网上找的视频中的例子,感觉很适合类和对象分不清楚的同学参考,仅供学习分享,谢谢 // 创建一个Pointtest类,用属性x.y表示点的坐标位置,求两点之间的距离,使用两种方法:类方法和 ...
- C++ Primer Chapter 1
When I start reviewing, I thought Chapter is useless. Because the title is "Getting Start" ...
- CDZSC_2015寒假新人(1)——基础 i
Description “Point, point, life of student!” This is a ballad(歌谣)well known in colleges, and you mus ...
- 用Apache Ivy实现项目里的依赖管理
Apache Ivy是一个管理项目依赖的工具. 它与Maven Apache Maven 构建管理和项目管理工具已经吸引了 Java 开发人员的注意.Maven 引入了 JAR 文件公共存储库的概念 ...
- QT中的OpcDa 客户端 实现
前段时间开发Windows下的设备端软件接触到了OPC DA,虽然现在有了更强大的OPC UA,但是为了兼容一些老的设备,不得不硬着头皮去啃这个老掉牙的已经过时了的技术.本来只是想粗略了解一下,简单写 ...
- dojo Tree 添加、删除节点
var tree=this.tree; var store=tree.model.store; if(this.node){ console.log(this.node) var children=t ...
- Find them, Catch them(POJ 1703 关系并查集)
Find them, Catch them Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 38668 Accepted: ...