小知识点：iframe 自页面操作父页面,firefox监听事件

现在的位置: 首页 > 综合 > 正文

小知识点：iframe 自页面操作父页面,firefox监听事件

2013年09月12日 ⁄ 综合 ⁄ 共 5409字 ⁄ 字号小中大 ⁄ 评论关闭

一般javascript无法控制页面内部的iframe,而很多情况下,需要在父页面数据变换时同步更新iframe里的内容. 此时可利用javascript的机制,在iframe内部写父页面的js事件.比如,父页面有一TextBox,ID为txtText,当TextBox的值变换时,子页面需要显示这个值.此时可在iframe 页面内输入: parent.document.getElementByID("txtTest").onchange = function() { document.body.innerHTML = parent.document.getElemntByID("txtTest").value; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>attachEvent Test</title>
<style type="text/css">
html,body
{
padding:0px;margin:0px;
font-family: "宋体";color: #4b4b4;background-color: #fff;
height:100%;text-align: center;
}
</style>
</head>
<body>
<br />
<div style="width:100%;height:200px;border:1px solid #ccc;">
<div id="top_mycoomix_div" style="display:block;border:1px solid #ccc;">
attachEvent test
</div>
</div>
<script type="text/javascript">
//方法一
Object.prototype.attachEvent = function(method,func)
{
//alert(this);//[object HTMLBodyElement]
if(!this[method]){
this[method]=func;
}
else{
this[method]=this[method].attach(func);
}
}
Function.prototype.attach=function(func){
var f=this;
return function(){
f();
func();
}
}
function hiddenTopMycoomix()
{
alert("into hiddenTopMycoomix function");
document.getElementById("top_mycoomix_div").style.display = "none";
}
//监听document.body必须设置body的样式height:100%;点击页面才能达到预期效果，否则只能在可见区域点击才有效.
//监听document则不存在这个问题
//不标准的调用方式
//window.document.body.attachEvent("onclick",function(){hiddenTopMycoomix();});
//window.document.body.attachEvent("onclick",hiddenTopMycoomix);
</script>
<script type="text/javascript">
//方法二
function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};
//封装后统一的调用方式
//addListener(document.body,"click",hiddenTopMycoomix);
</script>
<script type="text/javascript">
//方法三
//引入用到的coos脚本库部分，实际应用中不在页面上而采用导入js文件的方式
var coos = function(){this.version = "1.0";};
coos.$id = function(id)
{
return document.getElementById(id);
};
coos.$obj = function(el)
{
var obj = el;
if(typeof(el) == "string")
{
obj = document.getElementById(el);
}
return obj;
};
coos.event = function(e)
{
var e = e || window.event;
return e;
};
coos.event.format = function(e)
{
var e = e || window.event;
try
{
if(!e.pageX && e.clientX)//firefox3 nonsupport pageX
{
e.pageX = e.clientX + document.body.scrollLeft;
e.pageY = e.clientY + document.documentElement.scrollTop;
}
}
catch(e){}
if(window.event)
{
e.charCode = (e.type == "keypress") ? e.keyCode : 0;
e.eventPhase = 2;
e.isChar = (e.charCode > 0);
e.preventDefault = function ()
{
this.returnValue = false;
};
if(e.type == "mouseout")
{
e.relatedTarget = e.toElement;
}
else if(e.type == "mouseover")
{
e.relatedTarget = e.formElement;
}
e.stopPropagation = function ()
{
this.cancelBubble = true;
};
e.target = e.srcElement;
e.time = (new Date()).getTime();
}
try
{
if (e.target.nodeType == 3)
{// defeat Safari bug
e.target = e.target.parentNode;
}
//如果不存在keyCode属性，同时存在which属性则赋值,因为该属性为只读属性(has only a getter)
if(!e.keyCode && e.which)
{
e.keyCode = e.which;
}
}
catch(e){}
return e;
};
coos.event.add = function(el,EventType,callback)
{
var obj = coos.$obj(el);
if(obj.addEventListener)
{
obj.addEventListener(EventType,callback,false);
}
else if(obj.attachEvent)
{
obj.attachEvent('on'+EventType,callback);
}
else
{
obj['on'+EventType] = callback;
}
};
//方便页面加载完成后执行方法的接口
coos.onloadEvent = function(fn)
{
if (window.addEventListener)
{
window.addEventListener("load",fn,false);
}
else if(window.attachEvent)
{
window.attachEvent("onload", fn);
}
else
{
window.onload = fn;
}
};
//以下为实现代码部分
var coomixTimeout = null;
function hiddenTopMycoomix2(e)
{
var obj = coos.$id("top_mycoomix_div");
if(!obj){return;}
var e = coos.event.format(e);
coomixTimeout = setTimeout(function(){obj.style.display = "none";},100);
if(e.target == obj)
{
clearTimeout(coomixTimeout);
}
}
coos.event.add(document,"click",hiddenTopMycoomix2);
//在DOM元素加载完成前的实现代码，需要在页面元素加载完成后执行,一般情况下在window.onload后执行
coos.onloadEvent(function(){
var obj = coos.$id("testDom");
obj.innerHTML = obj.innerHTML + "<br />after set value";
setTimeout(function(){obj.style.display = "none";},500);
});
</script>
<div id="testDom">testDom</div>
</body>
</html>

【上篇】什么叫主键，外键
【下篇】二叉树的建立

作者: rigged

该日志由 rigged 于11年前发表在综合分类下，最后更新于 2013年09月12日.
转载请注明: 小知识点：iframe 自页面操作父页面,firefox监听事件 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

小知识点：iframe 自页面操作父页面,firefox监听事件

作者: rigged

书签

最新文章New

本站推荐

返回首页