通常情况下,我们如果想得到光标处的元素,可以用获取事件源的方法,即:
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对象的实现方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
那么通过这个特征,我们可以在子页面中,把自身的window对象传递给父页面就可以了,这样父页面就很轻松的访问子页面,再也不用靠虑如何从iframe对象上得到window对象了。 二话不说,我们先看代码: 父页面代码: ...
使用iframe的时候,可能会涉及到父子窗口之间传值和方法的相互调用,之前一直有些迷糊,也没有着意去弄... 父窗口获得子窗口中的某个对象: 首先要获得子窗口的iframe对象,比如: 代码如下: var frameName = window
1. 获得iframe的window对象存在跨域访问限制。 chrome:iframeElement. contentWindowfirefox: iframeElement.contentWindowie6:iframeElement.contentWindow 文章Iframes, onload, and document.domain中说“he ...
-修正了使用IFrame的Window关闭后不能再次打开的BUG(feedback:alexa99)。 -修正了IE下Grid中的一个JS问题(feedback:lqm4108)。 -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs...
-修正了使用IFrame的Window关闭后不能再次打开的BUG(feedback:alexa99)。 -修正了IE下Grid中的一个JS问题(feedback:lqm4108)。 -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs...
常用iframe<iframe id="IFramewindow" width="0" height="0" name='IFramewindow'></iframe> -2.常用 //错误提示 function AlertErrorMeg(meg){ alert(meg); } //提示转向 function AlertRedirect(meg,url){ ...
<body onload="window.resizeTo(window.screen.width - 4,window.screen.height-50);window.moveTo(-4,-4)"> 无关闭按钮IE window.open("aa.htm", "meizz", "fullscreen=7"); 统一编码/解码 alert...
│ │ │ ├[思库教育]JS 第31集 window对象中的几个简单对象.avi │ │ │ ├[思库教育]JS 第32集 iframe内嵌窗口.avi │ │ │ └[思库教育]JS 第33集 DOM介绍.avi │ │ ├ │ │ │ ├[思库教育]JS 第34集 当当...
basicLightbox 有史以来最轻的灯箱。 内容 演示版 名称 描述 关联 默认 包括大多数功能。...在basicLightbox中使用DOM元素/节点。... 检查上面的链接资源,以确定是否必须进行polyfill才能获得所需的
UBB:提供完美的UBB可视化编辑解决方案,在您获得安全高效代码存储的同时,又能享受可视化编辑的便捷 Demo(演示): 默认模式:http://xheditor.com/demos/demo01.html 自定义按钮:...
Xml真是好东西,在Web控件中,可以得到灵活的运用(在我的上篇随笔《xml+xsl+htc,web控件开发的理想组合》中,已经简单提到了xml+xsl+htc的理想组合),在这里也不例外,先用Xml来定义好菜单的数据menu.xml: ...
还要注意的是id属性也会被克隆,也就是克隆后会有两个相同id的元素(如果克隆对象有设置的话),这很容易会导致其他问题,程序会把克隆table的id属性设空。 ps:table请用class来绑定样式,用id的话新table就获取不...