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

时间:2022-08-13 14:45:26

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了

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