使用iframe嵌套另一个项目，并获取参数

索隆迷路了~

已于 2024-08-31 16:30:44 修改

阅读量163

点赞数 1

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

于 2024-08-31 16:30:31 首次发布

本文链接：https://blog.csdn.net/2201_75763401/article/details/141754534

版权

父页面使用iframe嵌套

url为另一个项目的ip地址:端口号

<iframe :src="url" frameborder="0" width="100%" height="100%"></iframe>

获取iframe嵌套另一个项目的参数

子页面 iframe页面

使用window.postMessage发送数据

// 假设子页面知道何时发送数据  
function sendDataToParent() {  
  const data = { key: 'value' };  
  window.parent.postMessage(JSON.stringify(data), '父页面源');  
}

父页面添加事件接收参数

export default {  
  mounted() {  
    window.addEventListener('message', this.handleMessage, false);  
  },  
  beforeDestroy() {  
    window.removeEventListener('message', this.handleMessage, false);  
  },  
  methods: {  
    handleMessage(event) {  
      // 检查消息来源以防安全漏洞  
      if (event.origin !== 'iframe嵌套项目源') {  
        return;  
      }  
  
      // 解析并处理数据  
      const data = JSON.parse(event.data);  
      console.log(data); 
    }  
  }  
}