iframe PostMessage 实现父子组件的传值

我们都知道可以使用iframe可以把一个页面嵌套到另外一个页面内部进行显示,那么这两个页面如何进行传值交互呢, 下面我们就简单的来看一下首先,新建两个文件,parant.html和child.html(在这里我使用的是vue语法哈~)首先是将child.html的内容嵌入parent.html中,代码如下所示:<div id="app"><iframeid="child" src

橙程橙

16908人浏览 · 2021-03-31 10:12:23

橙程橙 · 2021-03-31 10:12:23 发布

我们都知道可以使用iframe可以把一个页面嵌套到另外一个页面内部进行显示,那么这两个页面如何进行传值交互呢, 下面我们就简单的来看一下

首先,新建两个文件,parant.html和child.html(在这里我使用的是vue语法哈~)

首先是将child.html的内容嵌入parent.html中,代码如下所示:

  <div id="app">
      <iframeid="child" src="http://127.0.0.1:5500/day01/b.html" frameborder="2"></iframe>
      
    </div>

接着我们先来看子组件给父组件发送数据,

child.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bbbb</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
  <div id="app">
   
    <input type="text" v-model='username'>
    //点击按钮将输入框中的数据发送给父元素
    <button  @click='send'>发送</button>
  </div>
  <script>
    new Vue({
      el:'#app',
      data(){
        return{
          username:''
        }
      },
  
      methods:{
        send(){
          window.parent.postMessage(this.username,'http://127.0.0.1:5500/day01/a.html')
        }
      }
    })
  </script>
</body>
</html>

此时的地址 'http://127.0.0.1:5500/day01/a.html' 是我父页面的地址,如果你想要向所有嵌入它的父组件发送数据那么这里的地址可以替换为 *

parent.html接收数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>aaaa</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
    <div id="app">
      <iframe  id="child" src="http://127.0.0.1:5500/day01/b.html" frameborder="2"></iframe>
      
    </div>
    <script>
      new Vue({
        el:'#app',
        data(){
          return{
            test:'我是父页面传过来的参数哦'
          }
        },
        mounted(){
          
          window.addEventListener('message',(msg)=>{
            console.log(msg.data);
          })
         
        },
        methods:{
          
        }
      })
    </script>
</body>
</html>

最后再来看看父组件给子组件发送数据

parent.html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>aaaa</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
    <div id="app">
     //在子组件嵌入加载的过程中, 触发toChild事件
      <iframe @load='toChild()' id="child" src="http://127.0.0.1:5500/day01/b.html" frameborder="2"></iframe>
    </div>
    <script>
      new Vue({
        el:'#app',
        data(){
          return{
            test:'我是父页面传过来的参数哦'
          }
        },
        mounted(){
          
          window.addEventListener('message',(msg)=>{
            console.log(msg.data);
          })
         
        },
        methods:{
         //父组件给子组件发送数据,此时这个地址为当前接收该数据的子组件的地址
          toChild(){
            let id = document.getElementById('child')
            id.contentWindow.postMessage(this.test,'http://127.0.0.1:5500/day01/b.html')
          }
        }
      })
    </script>
</body>
</html>

child.html接收数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bbbb</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
  <div id="app">
    hello
    <input type="text" v-model='username'>
    <button  @click='send'>发送</button>
  </div>
  <script>
    new Vue({
      el:'#app',
      data(){
        return{
          username:''
        }
      },
      mounted(){
        //接收父组件传递的数据
        window.addEventListener('message',(data)=>{
          console.log(data,'===========');
        })
      },
      methods:{
        send(){
          window.parent.postMessage(this.username,'http://127.0.0.1:5500/day01/a.html')
        }
      }
    })
  </script>
</body>
</html>

以上就是全部的内容啦,前端小菜鸟一只, 有问题欢迎批评指正!!!

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^