zoukankan      html  css  js  c++  java
  • H5新增的postMessage跨域解决方案Demo

    Demo背景:html中使用iframe嵌入了跨域的vue项目,在html中将参数传入到跨越的vue项目中。

    向跨越的子窗口中发送数据

    function sendMessage(data) {
        // 通过 postMessage 向子窗口发送数据
       document.querySelector(".ifm_analysis").contentWindow.postMessage(data, "*")
    }

    在跨越的子窗口中接收数据

    // 记录vue实例地址的变量
    let currVM
    window.addEventListener("message", receiveMessage, false);
    function receiveMessage(event) {
        // event.source.postMessage("", event.origin);
        // 页面转入子窗口页面时,启动检测监听的参数
        if (document.location.href.indexOf("consignew") > -1) {
            // 调用vue实例中的searchConsignsByIdArr方法
            currVM.searchConsignsByIdArr(event.data)
        }
    }
  • 相关阅读:
    VS中使用svn注意事项
    后端调用WebApi
    抽象工厂模式
    观察者模式
    建造者模式
    外观模式
    模板方法
    原型模式
    工厂方法
    代理模式
  • 原文地址:https://www.cnblogs.com/sangzs/p/8559118.html
Copyright © 2011-2022 走看看