页面嵌入iframe关于父子传参调用

1、首先来说一下iframe是干什么用的

　　IFRAME是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架（即行内框架），通俗点说就是在一个页面中通过写iframe标签来嵌入另一个页面

2、代码的实现

　　首先是父元素

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>iframe父子页面互调</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>
    <h2>子页面调用postMessage，父页面通过监听来获取子页面的数据</h2>
    <div style="width:400px; height: 200px;">
        <iframe src="son1.html" frameborder="0" style="width:100%; height: 100%;"></iframe>
    </div>
    <div id="output"></div>

    <h2>子页面调用父页面的一些方法</h2>

    <script>
        window.addEventListener('message', function (e) {
            console.log(e.data);
            var data = e.data;
            if (data.txt) {
                var output = document.getElementById('output');
                output.innerHTML = `新的名字是：${data.txt}`;
            }
        }, false);
        
        function fun() {
            console.log('这是父页面打印出的');
        }
    </script>
</body>

</html>

　　下面是子元素的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子页面</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>
    <div style="width:300px; height: 180px; border:1px solid #000">
        请输入一些值：<input type="text" id="text1" />
        <button onclick="sendMessageToParent()">设置</button>
        <button onclick="click()">
            点击调用父元素的方法
        </button>
    </div>
    <script>
        function sendMessageToParent() {
            //设置test键值下的内容等于input框中的内容
            var txt = document.getElementById('text1').value;
            // 下面也可以用（window.parent.postMessage({txt:txt});） top代表父元素的最顶层
            window.top.postMessage({ txt: txt });
        }
        // 调用父元素的方法
        $(function () {
            parent.fun();
        })
    </script>
</body>

</html>

3、将代码复制下来打开就OK了

注意：此代码会涉及到一下跨域问题关于浏览器本地跨域的问题参照我下一篇文章

页面嵌入iframe关于父子传参调用

猜你喜欢