js操作控制iframe頁面的dom元素
阿新 • • 發佈：2019-04-17
head tel tex width title style col 頁面 就是
1、代碼1 index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我是demo1.html</title> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> </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‘); // var ifdoc = oIframe.contentWindow.document; // oBtn1.onclick = function() { // //demo1.html頁面中的js控制了iframe1.html頁面的字體顏色 //oIframe.contentWindow.document.body.style.color = ‘red‘; // console.log(ifdoc.) // } // } window.onload = function(){ var oBtn1 = document.getElementById(‘btn1‘); //獲取iframe元素,oIframe.contentWindow就是iframe1.html頁面的window對象 var oIframe = $("#iframe1")[0]; var ifdoc = oIframe.contentWindow.document; oBtn1.onclick = function() { //demo1.html頁面中的js控制了iframe1.html頁面的字體顏色 oIframe.contentWindow.document.body.style.color = ‘red‘; var text = ifdoc.getElementById("bbs").textContent=" "; console.log(text) } } </script> </body> </html>
2、代碼二是iframe頁面的代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我是iframe1.html</title> </head> <body> <div id="bbs"> 父級頁面要改變我的顏色 </div> </body> </html>
通過選中iframe標簽使用contentWindow 方法來獲取iframe子頁面的document。
js操作控制iframe頁面的dom元素