使用JavaScript进行iframe的DOM操作

最新推荐文章于 2019-04-17 10:15:00 发布

weistar103

最新推荐文章于 2019-04-17 10:15:00 发布

阅读量221

点赞数

分类专栏： HTML5 文章标签： javascript web安全 ViewUI

本文链接：https://blog.csdn.net/weistar103/article/details/84417604

版权

HTML5 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

使用JavaScript可以方便的进行iframe的DOM操作

若是在本地测试，可直接使用IE和FireFox，使用chrome则需要执行chrome --disable-web-security

禁用chrome的WEB安全限制则可以在本地进行测试，代码如下：

iframe_dom.html

<!DOCTYPE html">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
		<title>iframe DOM操作[demo]|使用JavaScript来进行iframe的DOM操作 |by WYQ</title>
		<style type="text/css">
body {
	margin: 0;
	padding: 0;
}

#wIframeA,#wIframeB {
	width: 400px;
	height: 400px;
	float: left;
}
</style>
	</head>
	<body>
		<h1 style="text-align: center">
			使用JavaScript在IE和Firefox下进行iframe的DOM操作[demo]
		</h1>
		
		<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>
		<div id="pHello"
			style="margin: 10px auto; width: 360px; height: 30px;">
			此处可通过iframeB的JavaScript函数，来替换哦~
		</div>
		<div style="margin: 10px auto; width: 810px; height: 300px;">
			<iframe id="wIframeA" name="myiframeA" src="a.html" scrolling="no"
				frameborder="0"></iframe>
			<iframe id="wIframeB" name="myiframeB" src="b.html" scrolling="no"
				frameborder="0"></iframe>
		</div>
		<script type="text/javascript">
function iframeA() {
	var a = getIFrameDOM("wIframeA");
	a.getElementById('hello').style.background = "red";
}
function iframeB() {
	var a = getIFrameDOM("wIframeB");
	a.getElementById('hello').style.background = "green";
}
function getIFrameDOM(id) {
	return document.getElementById(id).contentDocument
			|| document.frames[id].document;
}
</script>
	</body>
</html>

a.html

<!DOCTYPE html">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>iframe DOM操作 _iframeA|by WYQ</title>
    </head>
    <body>
        <h1>I am iframe A</h1>
		<p id="hello">Hello World!</p>

    </body>
</html>

b.html

<!DOCTYPE html">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>iframe DOM操作 _iframeB|by WYQ</title>
    </head>
    <body>
        <h1>I am iframe B</h1>
		<p id="hello">Hello World!</p>
        <button οnclick="child4parent();" style="width:180px;float:left;">iframeB子窗口操作父窗口</button>
        <button οnclick="child4child();" style="width:150px;float:left;">iframeB操作子窗口A</button>
		<script type="text/javascript">
			function child4child(){
				var a=parent.getIFrameDOM("wIframeA");
				a.getElementById('hello').innerHTML="<span style='color:blue;font-size:18px;background:yellow;'>看，俺子窗口B也能DOM你A！</span>";
			}
			function child4parent(){
				parent.document.getElementById("pHello").innerHTML="<p style='background:#000;color:#fff;font-size:15px;'>O(∩_∩)O哈哈~用子窗口B就可以替换你！不服吗？</p>";
			}
		</script>
    </body>
</html>

weistar103

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JavaScript进行iframe的DOM操作

使用JavaScript可以方便的进行iframe的DOM操作若是在本地测试，可直接使用IE和FireFox，使用chrome则需要执行chrome --disable-web-security禁用chrome的WEB安全限制则可以在本地进行测试，代码如下：iframe_dom.html&lt;!DOCTYPE html"&gt;&lt;html&gt; &lt;hea...
复制链接

扫一扫

专栏目录