JS操作iframe元素

摘要:页面中有个iframe元素,iframe元素的src是iframe1.html,怎么在demo1.html页面中操作iframe1.html页面,js先找到iframe元素(比如命名为:oIframe),那么oIframe.contentWindow就是iframe1.html这个页面的window

iframe就是我们常用的iframe标签:<iframe>。iframe标签是框架的一种形式,也比较常用到,iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。  


demo1.html页面中有个iframe元素,iframe元素的src是iframe1.html,怎么在demo1.html页面中操作iframe1.html页面

答曰:demo1.html中,js先找到iframe元素(比如命名为:oIframe),那么oIframe.contentWindow就是iframe1.html这个页面的window,剩下了就是DOM操作的事情了。


举例:要求:demo1.html页面中有个按钮,点击按钮,iframe1页面某些文字改变颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我是demo1.html</title>
	</head>
	<body>
		<input type="button" name="btn1" id="btn1" value="点击按钮控制iframe页面" />
		<br />
		<iframe id="iframe1" src="iframe1.html" width="300" height="200"></iframe>
		<script>
			window.onload = function(){
				var oBtn1 	= document.getElementById(‘btn1‘);
				//获取iframe元素,oIframe.contentWindow就是iframe1.html页面的window对象
				var oIframe = document.getElementById(‘iframe1‘);
				oBtn1.onclick = function() {
					//demo1.html页面中的js控制了iframe1.html页面的字体颜色
					oIframe.contentWindow.document.body.style.color = ‘red‘;
				}
			}
		</script>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我是iframe1.html</title>
	</head>
	<body>
		父级页面要改变我的颜色
	</body>
</html>


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_1676