`
t42dw
  • 浏览: 58619 次
  • 性别: 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里的dom(实例讲解)

    5. 调用`iframe`内的方法:`iframeWindow.someFunction()` 在实际开发中,需要注意跨域问题,因为出于安全考虑,不同源的`iframe`之间不能自由地进行DOM操作和数据交互,除非两个页面都设置了正确的`CORS`策略。...

    jquery得到iframe src属性值的方法

    在主页面中,window对象和window.parent是同一个对象,但在嵌入的iframe页面中,window.parent指的是包含当前iframe的父窗口对象。 7. JavaScript弹窗alert(): alert()是JavaScript内置的一个函数,用于弹出包含...

    父页面得到iframe的数据和iframe页面得到父页面的数据.txt

    - **通过`window.frames`或`contentWindow`访问iframe**:这适用于非jQuery环境下直接操作iframe内的DOM。 - **利用`postMessage`进行跨域通信**:当iframe和父页面位于不同域时,可以使用`postMessage`方法安全地...

    iframe框架\JS获取iframe元素

    一旦获得了`iframe`内部的DOM元素,就可以像操作普通页面元素一样对其进行修改。 ```javascript iObj.document.getElementsByTagName('h1')[0].innerHTML = '我想变成她一天的一部分'; ``` #### 三、Firefox下访问...

    用js互相调用iframe页面内的js函数

    // 首先,需要获取到iframe的window对象 var frames = window.parent.window.document.getElementById("frameid").contentWindow; // 然后,可以调用iframe页面中的函数 frames.right(); ``` 这里的`window.parent...

    Javascript iframe交互并兼容各种扫瞄器的解决方法_.docx

    通过这段简洁的代码,父页面可以直接访问`iframeWindow`对象,从而轻松获得子页面的`window`对象。这种方式非常直观且易于使用。 #### 多个`iframe`的处理 当页面中有多个`iframe`时,处理方式会稍显复杂。此时,...

    JS window对象的top、parent、opener含义介绍

    再者,parent属性是在使用iframe或frame时经常遇到的,它允许嵌入在iframe或frame中的子页面访问其父页面的window对象。通过parent属性,子页面可以调用父页面中定义的方法或获取父页面中的对象。例如,在父页面A中...

    window.name解决跨域问题的文档

    1. name 在浏览器环境中是一个全局/window 对象的属性,且当在 frame 中加载新页面时,name 的属性值依旧保持不变。 2. 通过在 iframe 中加载一个资源,该目标页面将设置 frame 的 name 属性。 3. 此 name 属性值可...

    Jquery取得iframe下内容的方法

    1. 通过iframe的id获取其内容窗口:我们可以通过$(iframe_id).contentWindow获取到iframe的window对象,然后进一步获取到iframe内容的document对象。例如,$(window.parent.Iframe1.document.body).find('#deptName'...

    页面中iframe相互传值传参

    在iframe中,可以通过window.parent获取到父窗口的对象,而在父窗口中,则可以通过window.frames数组来访问特定的iframe窗口。例如,如果iframe的name属性设置为"BoardList",则可以通过parent.frames["BoardList"]...

    子页面访问父页面和跨iframe访问(ie 和火狐)

    - `window.frames`属性:如果两个iframe在同一域下,你可以通过索引或名字访问另一个iframe的`window`对象,然后操作其内容。 ```javascript var otherIframe = window.frames['iframeName']; otherIframe....

    js操作iframe的一些方法介绍

    无论是iframe中的页面还是顶层页面,都可以通过window.parent来获得父页面的window对象。在iframe中,顶层页面的window对象可以通过***来访问,这是所有浏览器通用的方式。 另外,如果需要在iframe中操作父页面的...

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

    然后定义一个函数frameReady,用于接收子页面传递过来的window对象并将其赋值给window.iframeWindow。 - 子页面代码中使用$(function(){})这种模式(即文档加载完毕后执行)来调用父页面的frameReady函数,并传递...

    Iframe 框架自适应被嵌入页面高度

    通过访问`contentWindow`和`document`属性,我们可以得到Iframe内部页面的文档对象,进而获取到内容区域的实际高度。最后,我们将这个高度赋值给Iframe的`style.height`,从而实现自适应高度。 然而,需要注意的是...

    js实现ifram取父窗口URL地址的方法

    window对象代表了浏览器中的一个窗口或一个标签页,它包含有关窗口的各种属性和方法。在iframe中,可以通过window.parent来访问其父窗口的对象。 获取父窗口URL地址通常有几种方法,比如使用document.referrer属性...

    JavaScript Window窗口对象属性和使用方法

    JavaScript 的 `Window` 对象是浏览器环境中最重要的对象之一,它是所有其他对象的顶级对象,提供了与浏览器窗口交互的各种功能。本文将深入探讨 `Window` 对象的属性、方法及其使用方法。 首先,我们来看 `Window`...

    解析Jquery取得iframe中元素的几种方法

    - **通过DOM方法**:使用`window.parent.document`可以在iframe中访问父窗口的document对象,进而操作父窗口中的元素。 - **通过jQuery方法**:`$("#elementId", window.parent.document)`用于在iframe中选择父窗口...

    JavaScript窗口对象概述.pdf

    JavaScript中的Window对象是浏览器环境中最基础且至关重要的对象,它代表了浏览器的主窗口或当前活动的窗口。Window对象不仅提供了访问和操作浏览器窗口的各种功能,还是其他许多JavaScript对象的父对象,比如...

    js获取IFRAME当前的URL的方法

    由于安全原因,浏览器对跨域通信有严格的限制,因此直接通过`iframe.src`属性获取IFRAME内的URL可能无法得到实际的加载URL,尤其是在IFRAME内容已经发生跳转的情况下。以下将详细介绍如何使用JavaScript获取IFRAME的...

Global site tag (gtag.js) - Google Analytics