如何操作iframe父页面中的元素、方法、变量

最新推荐文章于 2023-11-06 21:46:20 发布

牛长犇

最新推荐文章于 2023-11-06 21:46:20 发布

阅读量2.7w

点赞数 7

分类专栏： js基础 leon前端进阶之路文章标签： iframe iframe操作父页

本文链接：https://blog.csdn.net/wxl1555/article/details/77678716

版权

leon前端进阶之路同时被 2 个专栏收录

70 篇文章 8 订阅

订阅专栏

js基础

50 篇文章 7 订阅

订阅专栏

欢迎访问我的个人博客 http://xiaolongwu.cn/

方法

1. 在iframe中查找父页面元素的方法：

jQuery的方法：$("#id",window.parent.document)

原生的方法：window.parent.document.getElementById("id");

//有时候iframe会嵌套好几层，那么嵌套两层时就是：
window.parent.parent.document.getElementById("id"); //以此类推

//嵌套好几层，直接找最顶层可以用这个方法
window.top.document.getElementById("id");

2.在iframe中使用父页面的变量或者方法函数

parent.method

parent.variable

实例

<!-- 父页面 iframeParent.html-->
    <body>
        <div id="parentBox">我是爸爸</div>
        <iframe src="iframeChildren.html" width="300px" height="200px"></iframe>
    </body>

    <script type="text/javascript">
        var _parent = 'hello';
        var _parent1 = 'world';

        function methodParent(){
            console.log( _parent);
        }
    </script>

<!--  内嵌的iframe页面 iframeChildren.html-->
    <body>
        <div id="childrenBox">我是孩子</div>        
    </body>

    <script type="text/javascript">
        //jQuery操作父页面的元素
        $("#parentBox",parent.document).css('color','red');

        //原生的方法操作父页面元素
        var parentRed = window.parent.document.getElementById("parentBox").style.backgroundColor = 'blue';

        //调用父页面的方法
        parent.methodParent();

        //使用父页面的变量
        var _children = parent._parent1;

        console.log(_children);     
    </script>