js操作控制iframe页面的dom元素

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。

posted @ 2019-04-17 10:15  洺剑残虹  阅读(1250)  评论(0)  编辑  收藏  举报