scribble

ottocho's blog

Home About GitHub

18 Aug 2013
iframe and js

iframe 的 js 操作

前言

自从换了工厂以后写博客的时间都没有了。onenote的零碎笔记没时间和心情整理为文章了。

这个文章基本是转的内容。

iframe元素本身是位于父级页面中的,所以你可以像一个普通元素一样的使用和操作它。代表了iframe内容window对象是作为一个页面的属性加入到iframe中的。为了让父级页面能够以一种合适的方式获取iframe的window对象,父级页面和iframe页面的域名应该保持一致。

多iframe的页面的js开发,调试的时候可以在chrome的F12左下角第五个按钮切换frame环境进行调试。

获取 页面里的 iframe 的 window 对象

document.getElementById('east-frame').contentWindow

in jQuery:

$('#east-frame')[0].contentWindow

获取 页面里的 iframe 的 document 对象

document.getElementById('east-frame').contentDocument

in jQuery:

$('#east-frame')[0].contentDocument

$('#east-frame')[0].contentWindow.document

$(‘#east-frame’)[0].contentWindow.document == $(‘#east-frame’)[0].contentDocument true

ps: ie没有iframeElement.contentDocument属性,只能element.contentWindow.document。

iframe 中获得父页面的window对象

存在跨域访问限制。

获得父页面:window.parent 获得顶层页面:window.top 适用于所有浏览器

获得iframe在父页面中的html标签

存在跨域访问限制。

window.frameElement(类型:HTMLElement),适用于所有浏览器

**这个可以用来判断这个页面有没有被放在一个iframe中 **

if (window.frameElement) {
   /* 此页现在是在一个iframe中 */
} else {
   /* 此页不在一个iframe中 */
}

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);

获取页面内的frames

window.frames可以取到页面中的帧(iframe、frame等),需要注意的是取到的是window对象,而不是HTMLElement。

var ifr1 = document.getElementById(‘ifr1’); var ifr1win = window.frames[0]; ifr1win.frameElement === ifr1; // true ifr1win === ifr1; // false

参考文章:

ref 1 ref 2 ref 3


Til next time,
at 19:01

scribble

Home About GitHub