เนื่องจากข้อ จำกัด ของเบราว์เซอร์ (นโยบายต้นกำเนิดเดียวกัน) ปัญหาการข้ามโดเมนของ JavaScript เป็นปัญหาที่ยากมาก HTML5 ให้ฟังก์ชั่นของการส่งข้อความข้ามเอกสารและรับและส่งข้อมูลระหว่างเอกสารเว็บ การใช้ฟังก์ชั่นนี้ไม่เพียง แต่สามารถเว็บเพจที่มีแหล่งกำเนิดเดียวกัน (โดเมน + พอร์ต) สื่อสารกัน แต่ยังสามารถสื่อสารข้ามโดเมนระหว่างชื่อโดเมนที่แตกต่างกันสองชื่อ
Cross Document Messaging Cross Document Messaging ให้วิธีการโพสต์เพื่อส่งผ่านข้อมูลระหว่างเอกสารเว็บที่แตกต่างกันซึ่งสนับสนุนการส่งข้อความแบบเรียลไทม์ เบราว์เซอร์จำนวนมากจะรองรับคุณสมบัตินี้เช่น Google Chrome 2.0+, Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, Safari 4.0+ ฯลฯ
ดังนั้นฉันควรทำอย่างไรถ้า IE6, IE7 และเบราว์เซอร์อื่น ๆ ที่ไม่รองรับ HTML5?
คุณสามารถใช้วิธี window.name เนื่องจากการปรับเปลี่ยนของ window.name ไม่เกี่ยวข้องกับปัญหาข้ามโดเมน แม้ว่ามันจะไม่เหมาะอย่างยิ่งที่จะใช้ แต่เอฟเฟกต์ก็เป็นที่ยอมรับ
อย่างไรก็ตามเราไม่สามารถเขียน window.postmessage, window.addeventListener, window.name และเนื้อหาอื่น ๆ ทุกครั้งที่เรามีส่วนร่วมในการข้ามโดเมน
ด้วยเหตุนี้ฉันจึงสรุปกระบวนการข้ามโดเมนทั้งหมดและห่อหุ้มมันลงในปลั๊กอิน JavaScript เพื่อแก้ปัญหาข้ามโดเมนสองทางตระหนักถึงการสื่อสารแบบเรียลไทม์ระหว่างเอกสารเว็บที่แตกต่างกันและสามารถตระหนักถึงการสื่อสารข้ามโดเมนระหว่างชื่อโดเมนที่แตกต่างกันสองชื่อ
ที่อยู่ดาวน์โหลดตัวอย่าง: http://xiazai.vevb.com/201501/other/jcrossdomain_v2.rar, เวอร์ชัน v2
JavaScript cross-domain plugin jcrossdomain.js
การคัดลอกรหัสมีดังนี้:
(ฟังก์ชั่น (ชนะ) {
-
* ไม่มีต้นไม้บาน
* 2013/12/07 17:12
-
var _jcd = {
isinited: เท็จ
Elmt: เท็จ
แฮช: '',
delims: ',',
Rand: function () {
ส่งคืน (วันที่ใหม่). getTime ()
-
MSG: function () {
การแจ้งเตือน ('คำเตือน: คุณต้องโทรหาฟังก์ชัน init ในตอนแรก');
-
init: function (callback, elmt) {
if (_jcd.isinited == true)
กลับ;
_jcd.isinited = true;
_jcd.elmt = elmt;
if (win.postMessage) {
// เบราว์เซอร์รองรับ HTML5 postmessage วิธีการ
if (win.addeventListener) {
// รองรับเบราว์เซอร์เช่น Firefox, Google ฯลฯ
win.addeventListener ("ข้อความ" ฟังก์ชั่น (ev) {
callback.call (win, ev.data);
},เท็จ);
} อื่นถ้า (win.attachevent) {
// สนับสนุน IE เบราว์เซอร์
win.attachevent ("onMessage", ฟังก์ชั่น (ev) {
callback.call (win, ev.data);
-
-
_jcd.msg = function (data) {
_jcd.elmt.postMessage (ข้อมูล, '*');
-
}อื่น{
// เบราว์เซอร์ไม่รองรับวิธีการโพสต์ HTML5 เช่น IE6 และ 7
setInterval (function () {
if (win.name! == _jcd.hash) {
_jcd.hash = win.name;
callback.call (win, _jcd.hash.split (_jcd.delims) [1]);
-
}, 50);
_jcd.msg = function (data) {
_jcd.elmt.name = _jcd.rand () + _jcd.delims + ข้อมูล;
-
-
-
-
var jcd = {
initParent: function (callback, iframeid) {
_jcd.init (callback, document.getElementById (iframeid) .ContentWindow);
-
initchild: ฟังก์ชั่น (โทรกลับ) {
_jcd.init (โทรกลับ, win.parent);
-
SendMessage: ฟังก์ชั่น (ข้อมูล) {
_jcd.msg (ข้อมูล);
-
-
win.jcrossdomain = jcd;
})(หน้าต่าง);
วิธีการโทรในหน้าหลัก:
การคัดลอกรหัสมีดังนี้:
// ฟังก์ชั่นการโทรกลับที่กำหนดเอง
var cb = function (msg) {
การแจ้งเตือน ("รับผงชูรส:" + ผงชูรส);
-
// เริ่มต้น, โหลดฟังก์ชันการโทรกลับและ iframe id
jcrossdomain.initparent (cb, 'iframea');
// ส่งข้อความ
jcrossdomain.sendmessage ('สวัสดีเด็ก');
วิธีการโทรในหน้าย่อย:
การคัดลอกรหัสมีดังนี้:
// ฟังก์ชั่นการโทรกลับที่กำหนดเอง
var cb = function (msg) {
การแจ้งเตือน ("รับผงชูรส:" + ผงชูรส);
-
// เริ่มต้นฟังก์ชันการโทรกลับ
jcrossdomain.initchild (CB);
// ส่งข้อความ
jcrossdomain.sendMessage ('สวัสดีผู้ปกครอง');
เคล็ดลับการทดสอบแบบจำลอง:
เพื่อให้บรรลุการสื่อสารระหว่างโดเมนที่แตกต่างกันสามารถเพิ่มชื่อโดเมนสองชื่อลงในไฟล์โฮสต์ของระบบปฏิบัติการสำหรับการจำลอง
เพิ่มชื่อโดเมนที่แตกต่างกันสองชื่อลงในไฟล์โฮสต์
127.0.0.1 Parent.com
127.0.0.1 Child.com
วิวัฒนาการของโปรแกรมเมอร์: