Html跨域js封装，前端页面跨域js，postMessage实现跨域

Html跨域js封装，前端页面跨域js，postMessage实现跨域

================================

©Copyright 蕃薯耀 2020-08-05

https://www.cnblogs.com/fanshuyao/

一、js文件：

crossOrigin.js：

/**
 * 跨域js
 * 使用postMessage实现html页面的js跨域调用
 * 
 */


/**
 * 封装向iframe嵌套的系统页面发起请求方法，该外部页面需要声明window.addEventListener("message", function(event){});监听事件来接收
 * 本系统向外部系统发送请求，传递参数
 * eventdata：传递的参数，一般就是json对象，如{aa : 11, bb : 22}
 * iframeTarget：document.getElementById("mapIframe").contentWindow
 */
var crossOriginHandler = {
    call : function (iframeTarget, eventdata) {
        if(iframeTarget == null || typeof iframeTarget == "undefined"){
            console.error("iframe对象未定义");
        }
        iframeTarget.postMessage(eventdata, "*");
    },
    
    callById : function (iframeId, eventdata) {
        if(iframeId == null || typeof iframeId == "undefined" || iframeId == ""){
            console.error("iframe的id未定义");
        }
        var iframeTarget = document.getElementById(iframeId).contentWindow;
        iframeTarget.postMessage(eventdata, "*");
    }
};
//使用示例：（首先得引入js）系统向iframe发起请求，
/*
crossOriginHandler.call(document.getElementById("mapIframe").contentWindow, {
    aaa : "aaa",//这个参数固定，不能修改
    bbb : 123
});

或者：

crossOriginHandler.callById("iframe的Id值", {
    aaa : "aaa",//这个参数固定，不能修改
    bbb : 123
});
*/


/**
 * 监听外部系统的跨域回调请求
 * 需要在本系统页面定义一个方法function crossOriginMessageHandler(data);处理外部系统的请求
 * 外部系统回调方式：window.parent.postMessage({aa : "aa", bb : 123}, "*")
 * @param event
 * @returns
 */
window.addEventListener("message", function(event){
    if(event){
        if(window.crossOriginMessageHandler && (typeof window.crossOriginMessageHandler === "function")){
            window.crossOriginMessageHandler(event.data);
        }else{
            console.error("crossOriginMessageHandler(data)方法未定义");
        }
    }
}, false);

二、使用

1、引入js

<script type="text/javascript" src="../../static/js/crossOrigin.js"></script>

2、本页面接收消息，在页面定义回调的方法

/**
 * 处理跨域请求
 * data ： json对象
 * {crossCallType: "xxx", params: {status: "1"}}
 */
function crossOriginMessageHandler(data){
    console.log("页面接收请求，参数为===" + JSON.stringify(data));
    if(data){
        var crossCallType = data.crossCallType;//业务类型属性，区分哪个业务
        if(crossCallType == "xxx"){
            //自定义方法
        
        }else{
            alert("请求类型[" + crossCallType + "]不正确");
        }
    }
};

3、向iframe发送消息

crossOriginHandler.call(document.getElementById("mapIframe").contentWindow, {aa:1,bb:"bbbb"});

================================

©Copyright 蕃薯耀 2020-08-05

https://www.cnblogs.com/fanshuyao/