iframe父页面和子页面相互调用

最新推荐文章于 2023-06-16 11:26:41 发布

justdesk

最新推荐文章于 2023-06-16 11:26:41 发布

阅读量479

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/justdesk/article/details/122209167

版权

本文讲述了如何在HTML中使用iframe实现父子页面间的通信，包括在父页面加载子页面后调用子页面方法，并同步输入框值。通过`iframeIsLoad`函数和`contentWindow`属性实现了页面间的通信操作。

摘要由CSDN通过智能技术生成

父页面

<!DOCTYPE html>
<html>
<head>
    <title>iframe</title>
</head>
<body>
<!--父页面文本框-->
<input type="txt" name="desk" id="desk" value="desk">

<iframe id="define_page_iframe" style="height: 100%;width:100%;overflow-x: hidden;"
        frameborder="0"></iframe>


<script type="text/javascript">
    function iframeIsLoad(iframe, callback) {

        if (iframe.attachEvent) {

            iframe.attachEvent('onload', function () {

                callback && callback();

            });

        } else {

            iframe.onload = function () {

                callback && callback();

            }

        }

    }


    var define_page_iframe = document.getElementById("define_page_iframe");

    iframeIsLoad(define_page_iframe, function () {
    define_page_iframe.contentWindow.b();   // 调用子页面的方法
        // 父页面获取子页面iframe的元素 
        var iframeDom = $("#son_desk", define_page_iframe.contentWindow.document);
        iframeDom.val($("#desk").val());
    });
</script>

</body>
</html>

子页面(define_page_iframe中src获得的页面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" name="son_desk" id="son_desk">

<script>
    function b(){
        alert("子页面方法...");
    }

    //获取父iframe页面中的  id为desk的元素的值
    var dom=$('#desk',parent.document)
    console.log(dom.val());
</script>
</body>
</html>