Home > Article > Web Front-end > Detailed explanation of the steps to make a cross-domain iframe interface call with jQuery
This time I will bring you jQueryMake a cross-domain iframeInterfaceDetailed explanation of the calling steps, jQuery makes a cross-domain iframe interface callNotesThere are Which ones, the following are practical cases, let’s take a look.
cross.js
(function(global){
global.Cross = {
signalHandler: {},
on: function(signal, func){
this.signalHandler[signal] = func;
},
call: function(win, domain, signal, data, callbackfunc){
var notice = {"signal": signal, "data": data};
if(!!callbackfunc){
notice["callback"] = "callback_" + new Date().getTime();
Cross.on(notice["callback"], callbackfunc);
}
var noticeStr = JSON.
string
ify(notice);
win.postMessage(noticeStr, domain);
}
};
$(window).on("message", function(e) {
var realEvent = e.originalEvent,
data = realEvent.data,
swin = realEvent.source,
origin = realEvent.origin,
protocol;
try {
protocol = JSON.parse(data);
var result = global.Cross.signalHandler[protocol.signal].call(null, protocol.data);
if(!!protocol["callback"]){
Cross.call(swin, origin, protocol["callback"], {result: result});
}
if(/^callback_/.test(protocol.signal)){
delete Cross.signalHandler[protocol.signal];
}
} catch (e) {
console.log(e);
throw new Error("cross error.");
}
});
})(window);
<!doctype HTML>
<html>
<head>
<script src="jquery-1.8.3.min.js"></script>
<script src="cross.js"></script>
<script>
function call_b(){
var ifw = $("#ifr")[0].contentWindow;
//调用iframe子页面的公开的test接口, 子页面域名为http://localhost:8088
Cross.call(ifw,"http://localhost:8088","test",{t: $("#txt").val()});
}
</script>
</head>
<body>
<input id="txt" type="text"/>
<button
onclick
="call_b()">call</button>
<iframe id="ifr" src="http://localhost:8088/b.html"></iframe>
</body>
</html>
<!doctype HTML>
<html>
<head>
<script src="jquery-1.8.3.min.js"></script>
<script src="cross.js"></script>
<script>
//对外公开一个接口命名为test
Cross.on("test", function(data){
alert(data.t);
});
</script>
</head>
<body>
</body>
</html>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of the steps for Jquery to operate js arrays and objects
The above is the detailed content of Detailed explanation of the steps to make a cross-domain iframe interface call with jQuery. For more information, please follow other related articles on the PHP Chinese website!