首先創建兩個頁面
//iframe1.html <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="content">帥哥天下9</p>
<script>
console.log( window.parent.document.getElementById("testParent").innerHTML);
//調用父框架
</script>
</body> </html>
//demo1.html <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">click</button>
<div id="testParent">調用父框架</div>
<iframe src="iframe1.html" id="iframe1" frameborder="1"></iframe>
<script>
var btn=document.getElementById("btn"); var iframe1=document.getElementById("ifram1"); btn.onclick=function(){ iframe1.contentWindow.document.getElementById("content"). style.background="red";
//iframe1.contentDocument.getElementById("content")
.style.background="red"; } </script>
</body>
</html>
iframe1.contentWindow 獲取 src設置頁面的window對象然后操作里面的DOM
這個方法兼容IE 678 和其他主流瀏覽器 比如 FF Chrome 但是 Chrome對安全有保護
只可以在服務器端使用 可以用phpstudy測試
iframe1.contentDocument IE低版本不支持
在Chrome同理
window.parent 調用父框架
window.top 調用頂層框架
//ifram2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="changeTopDiv">changeTopDiv</button>
<iframe src="iframe2.html" frameborder="1" ></iframe>
<script>
var ctd=documet.getElementById("changeTopDiv");
var topDiv=window.top.document.getElementById("topIframe");
ctd.onclick=funtion(){
topDiv.style.background="red";
}
</script>
</body>
</html>
//demo2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="iframe2.html" frameborder="1"></iframe>
</body>
</html>
//demo3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="topIframe">topIframe</div>
<iframe src="demo2.html" frameborder="1"></iframe>
</body>
</html>
還有一個就是防止釣魚
有的網站會把別的網站iframe進來 然后欺騙用戶去操作一些東西 謀利
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="test.html" frameborder="1"></iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
if(window !=window.top){
//必須讓當前頁面為最高級別頁面
window.top.location.href=window.location.href;
}
</body>
</html>
改變框架高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style> html,body{ padding: 0; margin: 0;
} .box{ width:200px; height:200px; background: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style> html,body{ padding: 0; margin: 0;
} .box{ width:200px; height:400px; background: green;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="iframe5.html" frameborder="1" id="show" scrolling="no"></iframe>
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<script>
var btn1=document.getElementById("btn1"); var btn2=document.getElementById("btn2"); var show=document.getElementById("show");
function changeHeight(){ setTimeout(function(){ // 添加一個定時器 讓他執行慢一點
//不然src剛執行完 html 還沒刷新完
// 就改變寬度 還是之前的寬度 show.height=show.contentWindow.document.body.offsetHeight; }, 200); } changeHeight(); btn1.onclick=function(){ show.src="iframe5.html"; changeHeight(); } btn2.onclick=function(){ show.src="iframe6.html"; changeHeight(); } </script>
</body>
</html>
寫到這里 累死我了
最后一個就是iframe 的load事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="iframe8.html" frameborder="1" id="show" scrolling="no"></iframe>
<script>
var show=document.getElementById("show");
show.onload=function(){
alert("加載完畢！");
}
//ie 也支持這個事件 但是 IE事件不能這么用
//得需要事件綁定才可以
//show.attachEvent("click",function(){
alert("加載完畢");
});
</script> </script>
</body>
</html>