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

 

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

 

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

©Copyright 蕃薯耀 2020-08-05

http://fanshuyao.iteye.com/

 

一、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 + "]不正确");
		}
	}
};

 

 

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

©Copyright 蕃薯耀 2020-08-05

http://fanshuyao.iteye.com/