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

最新推荐文章于 2021-07-01 17:41:21 发布

weixin_30399797

最新推荐文章于 2021-07-01 17:41:21 发布

阅读量2.4k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wuzaipei/p/10721799.html

版权

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。

转载于:https://www.cnblogs.com/wuzaipei/p/10721799.html

weixin_30399797

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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...
复制链接

扫一扫