javascript关于Iframe父窗口和子窗口交互

最新推荐文章于 2023-05-24 10:42:14 发布

陌阡

最新推荐文章于 2023-05-24 10:42:14 发布

阅读量2.5k

点赞数

分类专栏： javascript 文章标签： iframe javascript xhtml button function firefox

本文链接：https://blog.csdn.net/zhaoxuejie/article/details/7478459

版权

javascript 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

//兼容IE、Firefox的iframe DOM获取函数
function getIFrameDOM(id){
	return document.getElementById(id).contentDocument || document.frames[id].document;
}

parent.html

<!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" />

</head>
<body>
<div id="pHello" style="margin:10px auto;width:360px;height:30px;">此处可通过iframeB的JavaScript函数，来替换哦~</div>
<iframe id="wIframeA" name="myiframeA" src="a.html" scrolling="no" frameborder="1"></iframe>
<iframe id="wIframeB" name="myiframeB" src="b.html" scrolling="no" frameborder="1"></iframe>
<div style="margin:10px auto;width:300px;height:40px;">
<input type="button" value="父窗口操作iframeA" οnclick="iframeA();" style="width:150px;float:left;"/>
<input type="button" value="父窗口操作iframeB" οnclick="iframeB();" style="width:150px;float:left;"/>
</div>
<script type="text/javascript">
function iframeA(){
	var a = getIFrameDOM("wIframeA");
	a.getElementById('hello_a').style.background = "red";
}
function iframeB(){
	var a = getIFrameDOM("wIframeB");
	a.getElementById('hello_b').style.background = "green";
}
function getIFrameDOM(id){
	return document.getElementById(id).contentDocument || document.frames[id].document;
}
</script>
</body>
</html>

a.html

<!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" />

</head>
<body>
<div id="hello_a">Hello a.html</div>
<script>
	
</script>
</body>
</html>

b.html

<!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" />
</head>
<body>
<div id="hello_b">Hello b.html</div>
<input type="button" value="子窗口操作父窗口" οnclick="parentIframe();" style="width:150px;float:left;"/>
<input type="button" value="子窗口操作iframeA" οnclick="iframeA();" style="width:150px;float:left;"/>
<script type="text/javascript">
function iframeA(){
	var a = parent.getIFrameDOM("wIframeA");
	a.getElementById('hello_a').style.background = "blue";
}
function parentIframe(){
	parent.document.getElementById("pHello").innerHTML = "<p style='background:#000;color:#fff;font-size:15px;'>O(∩_∩)O哈哈~用子窗口B就可以替换你！不服吗？</p>";
}
</script>
</body>
</html>

注意：

--------------------------------------------

在firefox下，iframe背景默认的是透明的，在IE下默认不是透明的，

我们可以使用allowTransparency='true' 来设置IE下的iframe为透明，

另外我们使用scrolling ='no' frameborder='0'分别来实现iframe页面没有滚动条，边框宽度。

动态将Iframe背景置为透明

iframeObj.allowTransparency = true;

陌阡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript关于Iframe父窗口和子窗口交互

//兼容IE、Firefox的iframe DOM获取函数function getIFrameDOM(id){ return document.getElementById(id).contentDocument || document.frames[id].document;}parent.html此处可通过iframeB的JavaScript函数，来替换
复制链接

扫一扫