通常情况下,我们如果想得到光标处的元素,可以用获取事件源的方法,即:
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反而会让你很抓狂(大部分时候是反过来的)。
分享到:
相关推荐
5. 调用`iframe`内的方法:`iframeWindow.someFunction()` 在实际开发中,需要注意跨域问题,因为出于安全考虑,不同源的`iframe`之间不能自由地进行DOM操作和数据交互,除非两个页面都设置了正确的`CORS`策略。...
在主页面中,window对象和window.parent是同一个对象,但在嵌入的iframe页面中,window.parent指的是包含当前iframe的父窗口对象。 7. JavaScript弹窗alert(): alert()是JavaScript内置的一个函数,用于弹出包含...
- **通过`window.frames`或`contentWindow`访问iframe**:这适用于非jQuery环境下直接操作iframe内的DOM。 - **利用`postMessage`进行跨域通信**:当iframe和父页面位于不同域时,可以使用`postMessage`方法安全地...
一旦获得了`iframe`内部的DOM元素,就可以像操作普通页面元素一样对其进行修改。 ```javascript iObj.document.getElementsByTagName('h1')[0].innerHTML = '我想变成她一天的一部分'; ``` #### 三、Firefox下访问...
// 首先,需要获取到iframe的window对象 var frames = window.parent.window.document.getElementById("frameid").contentWindow; // 然后,可以调用iframe页面中的函数 frames.right(); ``` 这里的`window.parent...
通过这段简洁的代码,父页面可以直接访问`iframeWindow`对象,从而轻松获得子页面的`window`对象。这种方式非常直观且易于使用。 #### 多个`iframe`的处理 当页面中有多个`iframe`时,处理方式会稍显复杂。此时,...
再者,parent属性是在使用iframe或frame时经常遇到的,它允许嵌入在iframe或frame中的子页面访问其父页面的window对象。通过parent属性,子页面可以调用父页面中定义的方法或获取父页面中的对象。例如,在父页面A中...
1. name 在浏览器环境中是一个全局/window 对象的属性,且当在 frame 中加载新页面时,name 的属性值依旧保持不变。 2. 通过在 iframe 中加载一个资源,该目标页面将设置 frame 的 name 属性。 3. 此 name 属性值可...
1. 通过iframe的id获取其内容窗口:我们可以通过$(iframe_id).contentWindow获取到iframe的window对象,然后进一步获取到iframe内容的document对象。例如,$(window.parent.Iframe1.document.body).find('#deptName'...
在iframe中,可以通过window.parent获取到父窗口的对象,而在父窗口中,则可以通过window.frames数组来访问特定的iframe窗口。例如,如果iframe的name属性设置为"BoardList",则可以通过parent.frames["BoardList"]...
- `window.frames`属性:如果两个iframe在同一域下,你可以通过索引或名字访问另一个iframe的`window`对象,然后操作其内容。 ```javascript var otherIframe = window.frames['iframeName']; otherIframe....
无论是iframe中的页面还是顶层页面,都可以通过window.parent来获得父页面的window对象。在iframe中,顶层页面的window对象可以通过***来访问,这是所有浏览器通用的方式。 另外,如果需要在iframe中操作父页面的...
然后定义一个函数frameReady,用于接收子页面传递过来的window对象并将其赋值给window.iframeWindow。 - 子页面代码中使用$(function(){})这种模式(即文档加载完毕后执行)来调用父页面的frameReady函数,并传递...
通过访问`contentWindow`和`document`属性,我们可以得到Iframe内部页面的文档对象,进而获取到内容区域的实际高度。最后,我们将这个高度赋值给Iframe的`style.height`,从而实现自适应高度。 然而,需要注意的是...
window对象代表了浏览器中的一个窗口或一个标签页,它包含有关窗口的各种属性和方法。在iframe中,可以通过window.parent来访问其父窗口的对象。 获取父窗口URL地址通常有几种方法,比如使用document.referrer属性...
JavaScript 的 `Window` 对象是浏览器环境中最重要的对象之一,它是所有其他对象的顶级对象,提供了与浏览器窗口交互的各种功能。本文将深入探讨 `Window` 对象的属性、方法及其使用方法。 首先,我们来看 `Window`...
- **通过DOM方法**:使用`window.parent.document`可以在iframe中访问父窗口的document对象,进而操作父窗口中的元素。 - **通过jQuery方法**:`$("#elementId", window.parent.document)`用于在iframe中选择父窗口...
JavaScript中的Window对象是浏览器环境中最基础且至关重要的对象,它代表了浏览器的主窗口或当前活动的窗口。Window对象不仅提供了访问和操作浏览器窗口的各种功能,还是其他许多JavaScript对象的父对象,比如...
由于安全原因,浏览器对跨域通信有严格的限制,因此直接通过`iframe.src`属性获取IFRAME内的URL可能无法得到实际的加载URL,尤其是在IFRAME内容已经发生跳转的情况下。以下将详细介绍如何使用JavaScript获取IFRAME的...