假设我们做一个下拉框的功能,当鼠标在页面上的其它位置点击一下时,这个下拉框就隐藏掉了,通常在没有iframe时,这个功能很容易做,给document绑定onmousedown或onclick即可,如果页面上有iframe时,鼠标点击在iframe内时,包含iframe的document是不响应任何事件的,所以需要给iframe绑定类似的事件,当iframe指向的是第三方的内容时,还在考虑跨域的问题,因此通过操作iframe的document是行不通的,还好有document.activeElement可供我们使用,最终的解决方案如下:
var IframeOnClick = {
resolution: 200,
iframes: [],
interval: null,
Iframe: function(element, cb) {
this.element =element;
this.cb = cb;
this.hasTracked = false;
},
track: function(element, cb) {
this.iframes.push(new this.Iframe(element, cb));
if (!this.interval) {
var _this = this;
this.interval = setInterval(function() { _this.checkClick(); }, this.resolution);
}
},
checkClick: function() {
if (document.activeElement) {
var activeElement = document.activeElement;
for (var i in this.iframes) {
if (activeElement === this.iframes[i].element) { // user is in this Iframe
if (this.iframes[i].hasTracked == false) {
this.iframes[i].cb.apply(window, []);
this.iframes[i].hasTracked = true;
}
} else {
this.iframes[i].hasTracked = false;
}
}
}
}
};
//调用方法,选中iframe对象,和要绑定的事件
IframeOnClick.track(document.getElementById("iFrame"), function() { alert('a click'); });
分享到:
相关推荐
本文将详细讲解如何使用jQuery为`iframe`的`body`元素添加`click`事件。 首先,我们需要理解`iframe`的基本概念。`iframe`(Inline Frame)是HTML中的一种元素,用于在当前文档中嵌入另一个文档。`iframe`的内容...
本问题聚焦于在iframe中操作父窗口的元素以及添加事件监听,特别是针对IE和Firefox浏览器的不同实现。 首先,我们需要理解iframe的基本用法。在HTML中,我们可以通过`<iframe>`标签来创建一个内联框架。例如: ```...
1. **创建iframe**:首先,在HTML页面中添加一个`iframe`元素,通常将其设置为不可见(`style="display:none;"`)。 2. **设置iframe的src**:当用户触发提交事件(如点击按钮)时,将`iframe`的`src`属性设置为...
可以通过给Iframe添加一个ID来获取其引用,并通过DOM操作访问Iframe内的元素。 示例代码: ```html <iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe> ``` ...
`name`属性可以被添加到`<iframe>`、`<frameset>`、`<frame>`等元素中,用于标识特定的框架或窗口。这个属性值在`target`属性中作为目标引用,实现内容的定向加载。 ### 关键知识点二:在`frameset`对象中实现多...
- 使用`DOM操作方法`如`appendChild`、`removeChild`等来添加或移除元素,以保持事件监听器。 - 使用事件委托,将事件监听器绑定到共同的父元素上,而不是单个动态生成的元素。 - 在生成新内容后,使用`...
例如,为链接元素添加`onclick`事件: ```html <a href="#" onclick="changeIframeSrc('newPage.html'); return false;">切换页面 ``` 在JavaScript中定义`changeIframeSrc`函数来执行实际的源更换操作。 4. **...
实例中定义了一个名为changeSrc()的函数,这个函数通过使用document.getElementById()方法来获取id为"myframe"的iframe元素,并将其src属性值设置为"***"。这个函数随后通过一个按钮的onclick事件触发。 实现此功能...
2. **可扩展性**:通过各种事件(如onClick、onDblClick等)和API,可以实现复杂的交互逻辑。 3. **多态性**:ZTree支持多种样式和主题,可以适应不同设计需求。 4. **节点操作**:包括添加、删除、编辑、展开、折叠...
1. 在父页面中的按钮的事件处理器中,通过JavaScript来修改iframe的src属性,将参数添加到URL上: ```javascript function trigger() { var iframe = document.getElementById('childFrame'); // 确保iframe有一个...
在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,有时候会遇到iframe加载很慢什么原因呢,该如何解决呢?带着这个问题一起通过本文学习,寻找答案吧! aaa.html <HTML> <HEAD> <...
4. **JavaScript事件处理**:在JavaScript中,可以使用`addEventListener`或`onclick`等方法为元素添加点击事件监听器。一旦用户点击关闭按钮,触发的事件处理函数会执行相应的逻辑,例如修改iframe的`display`属性...
同时,通过嵌套一个按钮元素,并将按钮的onclick事件设置为调用changeSize函数,实现了点击按钮后iframe尺寸改变的效果。 关于JavaScript操作iframe属性的技巧,除了直接修改其height和width属性外,还可以通过以下...
3. **错误处理**:对于网络请求失败的情况,应添加相应的错误提示或重试机制,以提高系统的健壮性。 4. **响应式设计**:在不同设备上展示时,确保布局和样式能够自适应调整,提供一致的用户体验。 #### 五、总结 ...
<input type="button" onclick="changeStyle()" value="Change background color"> ``` 在这个例子中,当用户点击“Change background color”按钮时,`iframe`的背景颜色就会变为蓝色。这种技术对于实现动态交互...
为了解决这个问题,我们可以给iframe添加一个onload事件,在该事件中进行DOM操作。 例如,在子iframe中加载完成后,需要对父窗口的某个表格进行操作: ```javascript window.onload = function() { // 子页面加载...
// 添加IFrame到文档 document.body.appendChild(iframe); // 获取IFrame的文档对象 var doc = iframe.contentWindow.document; // 引入打印专有CSS样式,此处为示例,应根据实际项目修改 doc.write(...