1. demo1.html頁面中有個iframe元素，iframe元素的src是iframe1.html，怎麼在demo1.html頁面中操做iframe1.html頁面
答曰：demo1.html中，js先找到iframe元素（好比命名爲：oIframe），那麼oIframe.contentWindow就是iframe1.html這個頁面的window，剩下了就是DOM操做的事情了。javascript
舉例：要求：demo1.html頁面中有個按鈕，點擊按鈕，iframe1頁面某些文字改變顏色html
<!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>
效果以下：
java
注意：瀏覽器
- 谷歌瀏覽器對iframe要在服務器環境下執行。
- oIframe.contentWindow.document能夠簡寫爲oIframe.contentDocument，可是前者全部瀏覽器都支持，後者IE六、IE7不支持
2. demo2.html頁面中有個iframe，地址是iframe2.html，怎麼在iframe2.html頁面中操做demo2.html頁面中的元素
答曰：iframe2.html頁面的js中，window.parent就是demo2.html這個頁面的window，剩下的也就是具體怎麼DOM操做的事情了服務器
舉例：iframe2.html頁面中的按鈕，點擊一次，demo2.html頁面中某些文字變顏色app
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我是demo2.html</title> </head> <body> <div>有本事你改個人顏色啊！</div> <iframe id="iframe2" src="iframe2.html" width="300" height="200"></iframe> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是iframe2.html</title>
</head>
<body>
<input type="button" name="btn2" id="btn2" value="點擊按鈕控制demo2.html頁面" />
<script>
window.onload = function(){
var oBtn2 = document.getElementById('btn2');
oBtn2.onclick = function() {
//demo1.html頁面中的js控制了iframe1.html頁面的字體顏色
var oDiv = window.parent.document.body.children[0];
oDiv.style.color = 'red';
}
}
</script>
</body>
</html>
效果以下：字體
注意：這裏iframe2.html頁面中，window.parent就是他的父級的window，若是是demo2.html中iframe的src是demo3.html，demo3.html裏iframe是iframe2.html呢？就是多層嵌套，怎麼找到最頂層的頁面window對象呢？答曰：window.top便可！spa
3. 上面的案例中，都是demo頁面中固定好了的iframe，若是要動態加載iframe，該怎麼用呢？
答：和其餘元素標籤的DOM操做同樣，document.createElement便可。3d
舉例：要求demo3.html中，點擊按鈕，動態生成並加載iframe2.html（iframe2.html代碼就不用貼了，在上面案例中有）code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是demo3.html</title>
</head>
<body>
<h1>動態加載iframe</h1>
<input type="button" name="btn3" id="btn3" value="點擊建立iframe" />
<script>
window.onload = function(){
var oBtn3 = document.getElementById('btn3');
oBtn3.onclick = function() {
var oIframe = document.createElement('iframe');
oIframe.src = 'iframe2.html?t=798';
document.body.appendChild(oIframe);
//oIframe就是指在demo3.html這個頁面中的iframe標籤所表明的DOM元素
//oIframe.contentWindow是iframe2.html這個頁面的window對象
//別人說，IE下只能用oIframe.attachEvent('onload',function(){...}) 我試了下，IE下也能夠用下面的
oIframe.onload = function(){
alert(888);
};
//若是iframe頁面js中有window.onload，oIframe.contentWindow.onload是無效的（IE6-8下仍是有效的），若是沒有，則能夠。固然儘可能別用這麼亂
oIframe.contentWindow.onload = function(){
alert(999);
}
}
}
</script>
</body>
</html>
效果以下：
4. 案例，如何防止本身頁面被其餘人嵌套在iframe裏？
答曰：在本身頁面，用window.top != window進行判斷，若是確實不等，說明被嵌套，則賦值window.top.location.href值。核心代碼以下：
if(window.top != window){
window.top.location.href = window.location.href;
}
啊