1. 程式人生 > >JS操作iframe元素

JS操作iframe元素

1.  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>

  效果如下: