`
t42dw
  • 浏览: 57982 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

如何得到Iframe下的window对象

阅读更多

通常情况下,我们如果想得到光标处的元素,可以用获取事件源的方法,即:
window.event.srcElement        //IE
evt.taget                                  //Firefox~
不过现在的情况比较特殊,对于Iframe而言,firefox下倒是与想象中的一样,但是IE全局的window就比较有争议了:
按照我们一贯的想法,iframe不过是页面中的一个元素,与其他众多的div table无异,但经过试验后我发现:
iframe是个比我想象的更特殊的“元素”;
如果把iframe看成是另一个完整的页面,而不是页面中的一个元素,那所有的问题都好解释了。(比如iframe为啥没有onclick事件等等)
下面看看我是怎么得出这个结论的
假设iframe1是一个iframe;
<script>
iframe1.document.body.onclick=editorClick;//editorClick函数在下面定义
function editorClick(){
  alert(window.event);
}
</script>

这段代码总提示错误window.event为空,我就fool了,然后到处搜索未果。
接着试:
<script>
iframe1.document.body.onclick=editorClick;//editorClick函数在下面定义
function editorClick(){
  alert(window.event);             //空
  alert(this.tagName);             //输出:body ;this代表调用该函数的对象
  alert(this.parentNode.tagName);             //输出:html
  alert(this.parentNode.parentNode);        //输出:Object ,通过DOM查看器一层层看,估计是 document 对象
}
</script>

现在好像明白了,iframe有自己的很完整的文档对象模型,因此推断他应该也有自己的window对象。
现在的问题是:我们只能得到iframe中body的事件,如何通过body得到属于这个iframe的window对象呢?(this.parentNode.parentNode.parentNode是不行的,会报错说未定义)
查看官方文档body元素信息,发现有ownerDocument这个属性,显然这是document对象,接着查阅document对象的说明文档,又发现有parentWindow属性,赶紧试验:
alert(this.ownerDocument.parentWindow.event);       
输出‘<Object>’——成功!
最后的结论,如果要得到iframe内部元素的事件,就必须先得到iframe的window对象。
除了上面说的,还有一个简单的方法是:
iframe1.contentWindow;
这也是iframe的window对象,只不过在这个例子里我只能从iframe内部的元素来响应事件,所以比这个复杂点:
someElementInIframe.ownerDocument.parentWindow;
总结一下很简单:
我们当前页的事件是window.event,在Iframe里就成了另一个页面了,所以当然不能用当前页面的window.event,而要用上面那一长串,从这里可以看出firefox不使用全局事件也是有优点的,所以这个问题在firefox下一般不会被察觉,而IE反而会让你很抓狂(大部分时候是反过来的)。

 

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    js获取iframe中的window对象的实现方法

    下面小编就为大家带来一篇JS获得iframe中的window对象的实现方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    Javascript iframe交互并兼容各种浏览器的解决方法

    那么通过这个特征,我们可以在子页面中,把自身的window对象传递给父页面就可以了,这样父页面就很轻松的访问子页面,再也不用靠虑如何从iframe对象上得到window对象了。 二话不说,我们先看代码: 父页面代码: ...

    iframe的父子窗口之间的对象相互调用基本用法

    使用iframe的时候,可能会涉及到父子窗口之间传值和方法的相互调用,之前一直有些迷糊,也没有着意去弄... 父窗口获得子窗口中的某个对象: 首先要获得子窗口的iframe对象,比如: 代码如下: var frameName = window

    js操作iframe的一些方法介绍

    1. 获得iframe的window对象存在跨域访问限制。 chrome:iframeElement. contentWindowfirefox: iframeElement.contentWindowie6:iframeElement.contentWindow 文章Iframes, onload, and document.domain中说“he ...

    ExtAspNet_v2.3.2_dll

    -修正了使用IFrame的Window关闭后不能再次打开的BUG(feedback:alexa99)。 -修正了IE下Grid中的一个JS问题(feedback:lqm4108)。 -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正了使用IFrame的Window关闭后不能再次打开的BUG(feedback:alexa99)。 -修正了IE下Grid中的一个JS问题(feedback:lqm4108)。 -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs...

    107个常用javascript语句

    常用iframe&lt;iframe id="IFramewindow" width="0" height="0" name='IFramewindow'&gt;&lt;/iframe&gt; -2.常用 //错误提示 function AlertErrorMeg(meg){ alert(meg); } //提示转向 function AlertRedirect(meg,url){ ...

    js使用小技巧

    &lt;body onload="window.resizeTo(window.screen.width - 4,window.screen.height-50);window.moveTo(-4,-4)"&gt; 无关闭按钮IE window.open("aa.htm", "meizz", "fullscreen=7"); 统一编码/解码 alert...

    思库教育PHP零基础培训+进阶课程+PHP项目开发实战 21G PHP零基础学习视频教程.txt

    │ │ │ ├[思库教育]JS 第31集 window对象中的几个简单对象.avi │ │ │ ├[思库教育]JS 第32集 iframe内嵌窗口.avi │ │ │ └[思库教育]JS 第33集 DOM介绍.avi │ │ ├ │ │ │ ├[思库教育]JS 第34集 当当...

    basicLightbox:有史以来最轻的灯箱

    basicLightbox 有史以来最轻的灯箱。 内容 演示版 名称 描述 关联 默认 包括大多数功能。...在basicLightbox中使用DOM元素/节点。... 检查上面的链接资源,以确定是否必须进行polyfill才能获得所需的

    xheditor v1.0.0 rc2 build 100401

    UBB:提供完美的UBB可视化编辑解决方案,在您获得安全高效代码存储的同时,又能享受可视化编辑的便捷 Demo(演示): 默认模式:http://xheditor.com/demos/demo01.html 自定义按钮:...

    无限菜单之 xml+popup 版(IE5.5+)

    Xml真是好东西,在Web控件中,可以得到灵活的运用(在我的上篇随笔《xml+xsl+htc,web控件开发的理想组合》中,已经简单提到了xml+xsl+htc的理想组合),在这里也不例外,先用Xml来定义好菜单的数据menu.xml: ...

    JavaScript Table行定位效果

    还要注意的是id属性也会被克隆,也就是克隆后会有两个相同id的元素(如果克隆对象有设置的话),这很容易会导致其他问题,程序会把克隆table的id属性设空。 ps:table请用class来绑定样式,用id的话新table就获取不...

Global site tag (gtag.js) - Google Analytics