摘要:消息前綴建議使用自己的項目名避免多項目之間的沖突類消息對象往發送消息出于安全考慮發送消息會帶上前綴以及現代瀏覽器支持兼容信使類添加一個消息對象初始化消息監聽剝離消息前綴兼容監聽消息廣播消息用法頁面頁面跨域傳數據跨域傳高度
messengerjs
/** * __ ___ * / |/ /___ _____ _____ ___ ____ ____ _ ___ _____ * / /|_/ // _ / ___// ___// _ / __ / __ `// _ / ___/ * / / / // __/(__ )(__ )/ __// / / // /_/ // __// / * /_/ /_/ \___//____//____/ \___//_/ /_/ \__, / \___//_/ * /____/ * * @description MessengerJS, a common cross-document communicate solution. * @author biqing kwok * @version 2.0 * @license release under MIT license */ define(function (require) { // 消息前綴, 建議使用自己的項目名, 避免多項目之間的沖突 var prefix = "[PROJECT_NAME]", supportPostMessage = "postMessage" in window; // Target 類, 消息對象 function Target(target, name){ var errMsg = ""; if(arguments.length < 2){ errMsg = "target error - target and name are both requied"; } else if (typeof target != "object"){ errMsg = "target error - target itself must be window object"; } else if (typeof name != "string"){ errMsg = "target error - target name must be string type"; } if(errMsg){ throw new Error(errMsg); } this.target = target; this.name = name; } // 往 target 發送消息, 出于安全考慮, 發送消息會帶上前綴 if ( supportPostMessage ){ // IE8+ 以及現代瀏覽器支持 Target.prototype.send = function(msg){ this.target.postMessage(prefix + msg, "*"); }; } else { // 兼容IE 6/7 Target.prototype.send = function(msg){ var targetFunc = window.navigator[prefix + this.name]; if ( typeof targetFunc == "function" ) { targetFunc(prefix + msg, window); } else { throw new Error("target callback function is not defined"); } }; } // 信使類 function Messenger(name){ this.targets = {}; this.name = name; this.listenFunc = []; this.initListen(); } // 添加一個消息對象 Messenger.prototype.addTarget = function(target, name){ var targetObj = new Target(target, name); this.targets[name] = targetObj; }; // 初始化消息監聽 Messenger.prototype.initListen = function(){ var self = this; var generalCallback = function(msg){ if(typeof msg == "object" && msg.data){ msg = msg.data; } // 剝離消息前綴 msg = msg.slice(prefix.length); for(var i = 0; i < self.listenFunc.length; i++){ self.listenFunc[i](msg); } }; if ( supportPostMessage ){ if ( "addEventListener" in document ) { window.addEventListener("message", generalCallback, false); } else if ( "attachEvent" in document ) { window.attachEvent("onmessage", generalCallback); } } else { // 兼容IE 6/7 window.navigator[prefix + this.name] = generalCallback; } }; // 監聽消息 Messenger.prototype.listen = function(callback){ this.listenFunc.push(callback); }; // 廣播消息 Messenger.prototype.send = function(msg){ var targets = this.targets, target; for(target in targets){ if(targets.hasOwnProperty(target)){ targets[target].send(msg); } } }; return Messenger; });用法 parent頁面
var messenger = new Messenger("parent"); var iframe = document.getElementById("iframepage"); messenger.addTarget(iframe.contentWindow, "iframe"); messenger.listen(function (msg) { var result = parseInt(msg, 10) + 20; if (result < mainWindowHeight) { result = mainWindowHeight; } $("#iframepage").height(result); });iframe 頁面
// iframe跨域傳數據 var messenger = new Messenger("iframe"); messenger.addTarget(window.parent, "parent"); // 跨域傳main 高度 var height = $(".main").height(); messenger.targets["parent"].send(height); messenger.listen(function (msg) { });
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85713.html
摘要:剛來公司時做得第一個項目是跨部門合作,使用了來做通信,十分簡單,代碼不長,這里分析一下間通信的實現方式源碼消息前綴建議使用自己的項目名避免多項目之間的沖突注意消息前綴應使用字符串類型類消息對象往發送消息出于安全考慮發送消息會帶上前綴 剛來公司時做得第一個項目是跨部門合作,使用了MessengerJS來做通信,十分簡單,MessengerJS代碼不長,這里分析一下iframe間通信的實現...
摘要:小結小結本文主要是介紹了一個方案及其使用方法,來解決父窗體與子窗體的通信問題。同時提供了一個完整的實例,可以實現子窗體向父窗體傳遞消息,父窗體通過監聽消息事件,來獲取子窗體消息的目的。歡迎大家前往騰訊云+社區,獲取更多騰訊海量技術實踐干貨哦~ 本文由前端林子發表于云+社區專欄 本文主要會介紹如何基于MessengerJS,實現iframe父窗體與子窗體間的通信,傳遞數據信息。同時本文會提...
摘要:說到跨域,就不得不提起瀏覽器的同源策略??缬驘o刷新提交跨域的方法有很多,像等等,由于項目中用到了進行跨域,所以本文主要總結一下如何利用進行無刷新提交。為了拿到返回回來的,需要使用一個函數,函數名后臺已經告知。 以前在面試的時候經常遇到問關于跨域的事兒,所以自己對跨域有一定的概念性了解,知道什么是跨域以及解決跨域的方法,但是具體實際從來沒有操作過,直到最近在公司項目中,遇到了一個需要使i...
閱讀 1048·2021-10-11 10:59
閱讀 3601·2021-09-26 09:55
閱讀 891·2019-08-30 15:55
閱讀 2650·2019-08-30 15:44
閱讀 434·2019-08-30 14:06
閱讀 680·2019-08-30 11:26
閱讀 3336·2019-08-30 10:49
閱讀 2466·2019-08-29 12:53