Iframe 和父页面交互+Iframe 的onclick()事件
假设我们做一个下拉框的功能，当鼠标在页面上的其它位置点击一下时，这个下拉框就隐藏掉了，通常在没有iframe时，这个功能很容易做，给document绑定onmousedown或onclick即可，如果页面上有iframe时，鼠标点击在iframe内时，包含iframe的document是不响应任何事件的，所以需要给iframe绑定类似的事件，当iframe指向的是第三方的内容时，还在考虑跨域的问题，因此通过操作iframe的document是行不通的，还好有document.activeElement可供我们使用，最终的解决方案如下：
======================================
[javascript] view plain copy
var IframeOnClick = {
resolution: 200,
iframes: [],
interval: null,
Iframe: function() {
this.element = arguments[0];
this.cb = arguments[1];
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;
}
}
}
}
};
调用 [ javascript ]
- IframeOnClick.track(document.getElementById("iFrame"), function() {
- alert('a click');
- });
转自： http://blog.csdn.net/sjzs5590/article/details/16623529
===================================================================================================
在网页中，如何获取嵌入网页中的iframe内的document 对象呢？
1、第一种访问方法
这种写法估计很多人都没有用过：
document.getElementById('iframe1').Document
注意：这里的获取document对象使用的是大写的Document， 若写成小写的document对象则指当前网页的document对象。
document.getElementById('iframe1').Document //iframe的document对象
document.getElementById('iframe1').document //当前网页的document对象
测试方法：
document.getElementById('iframe1').document.writeln('test is ok'); //结果：当前网页页面输出test is ok
document.getElementById('iframe1').Document.writeln('test is ok'); //结果：嵌入网页（iframe1）页面输出test is ok
2、第二种访问方法
document.getElementById('iframe1').contentWindow.document
3、iframe的获取方法
1）document.getElementById('iframe');
2) document.getElementByTagName[index]; //方挎号中的index为iframe在网页中的索引号
3) document.frames[index]; //通过文档的frames对象来访问iframe
转自： http://blog.csdn.net/hongweigg/article/details/20231461
==========================================================================
iframe里面的元素触发父窗口元素事件的jquery代码
例如父窗口定义了一个事件。
top:
$(dom1).bind('topEvent', function(){});
那么iframe里面的元素怎样触发父窗口dom1的事件呢？这样吗？
$(dom1, parent.document).trigger('topEvent');
看似正确，实则误导人。
因为父窗口的jquery对象与iframe里面的jquery对象实际为两个对象（function），iframe里面的jquery并不会触发另一个jquery对象定义的事件。除非你在iframe这样定义了：
iframe:
self.$ = parent.$;
所以解决的方法很简单：
parent.$(dom1,parent.doucment).trigger('topEvent');
调用父jquery执行该事件就行了。
话说iframe应该不必再引进jquery文件的，与父窗口共用一个jquery就行了，这样很环保。