ตารางต่อไปนี้ให้ผลลัพธ์ของการตรวจจับที่คล้ายคลึงกันเมื่อเทียบกับ http://store.company.com/dir/page.html:
เพื่อแก้ปัญหาข้ามโดเมนเราสามารถใช้วิธีการต่อไปนี้:
1. ข้ามโดเมนผ่าน JSONP
ใน JS มันเป็นไปไม่ได้ที่จะขอข้อมูลโดยตรงในโดเมนที่แตกต่างกันโดยใช้ XMLHTTPREQUEST อย่างไรก็ตามมันก็โอเคที่จะแนะนำไฟล์สคริปต์ JS ในโดเมนที่แตกต่างกันในหน้าและ JSONP ใช้คุณสมบัตินี้เพื่อให้ได้มัน
ตัวอย่างเช่นมีหน้า A.HTML และรหัสในนั้นจำเป็นต้องใช้ AJAX เพื่อรับข้อมูล JSON ในโดเมนอื่น ใน a.html นั่นคือ:
เราเห็นว่ามีพารามิเตอร์การโทรกลับหลังจากที่อยู่ของการเก็บข้อมูล แน่นอนหากหน้าที่อยู่ JSONP สำหรับการรับข้อมูลไม่ได้รับการควบคุมโดยคุณคุณจะต้องดำเนินการตามรูปแบบที่ระบุของบุคคลที่ให้ข้อมูล
เนื่องจากมันถูกนำมาใช้เป็นไฟล์ JS การส่งคืนของ http://example.com/data.php จะต้องเป็นไฟล์ JS ที่เรียกใช้งานได้ดังนั้นรหัส PHP ของหน้านี้อาจมีลักษณะเช่นนี้:
ผลลัพธ์สุดท้ายของเอาต์พุตหน้านั้นคือ:
ดังนั้นไฟล์ JS ที่ได้รับผ่าน http://example.com/data.php?callback=dosomething เป็นฟังก์ชัน Dosomething ที่เรากำหนดไว้ก่อนหน้านี้และพารามิเตอร์ของมันคือข้อมูล JSON ที่เราต้องการดังนั้นเราจึงได้รับข้อมูลข้ามโดเมนที่เราต้องการข้อมูล
ด้วยวิธีนี้หลักการของ JSONP นั้นชัดเจนมาก ผ่านเป็นพารามิเตอร์ ดังนั้น JSONP จึงต้องใช้หน้าฝั่งเซิร์ฟเวอร์เพื่อร่วมมือกัน
หลังจากรู้หลักการของการข้ามโดเมนของ JSONP เราสามารถใช้ JS เพื่อสร้างแท็กสคริปต์แบบไดนามิกสำหรับการดำเนินการข้ามโดเมนโดยไม่ต้องเขียนแท็กสคริปต์โดยเจตนาด้วยตนเอง หากหน้าของคุณใช้ jQuery วิธีการห่อหุ้มสามารถใช้ในการดำเนินการ JSONP ได้อย่างสะดวก
หลักการเหมือนกันยกเว้นว่าเราไม่จำเป็นต้องแทรกแท็กสคริปต์ด้วยตนเองและกำหนดฟังก์ชั่นกลับมา jQuery จะสร้างฟังก์ชั่นทั่วโลกโดยอัตโนมัติเพื่อแทนที่เครื่องหมายคำถามในการโทรกลับ =?, จากนั้นมันจะทำลายข้อมูลโดยอัตโนมัติหลังจากได้รับมัน วิธีการ $. getjson จะตรวจสอบโดยอัตโนมัติว่ามันเป็น cross-domain หรือไม่ การโหลดไฟล์ JS
2. ข้ามโดเมนย่อยโดยการปรับเปลี่ยนเอกสารโดเมน
เบราว์เซอร์มีนโยบายที่คล้ายคลึงกันและข้อ จำกัด อย่างหนึ่งคือในวิธีแรกเรากล่าวว่าเอกสารจากแหล่งต่าง ๆ ไม่สามารถขอผ่านวิธี AJAX ข้อ จำกัด ที่สองของมันคือการโต้ตอบ JS ไม่สามารถดำเนินการระหว่างกรอบของโดเมนที่แตกต่างกันในเบราว์เซอร์ สิ่งหนึ่งที่ควรทราบคือเฟรมเวิร์กที่แตกต่างกัน (พ่อและลูกชายหรือการสร้างเพียร์) สามารถหาวัตถุหน้าต่างของกันและกันได้ แต่ความเจ็บปวดคือคุณไม่สามารถใช้คุณสมบัติและวิธีการของวัตถุหน้าต่างที่ได้รับ (วิธีการโพสต์เมสเซจใน HTML5 เบราว์เซอร์บางตัวเช่น IE6 สามารถใช้แอตทริบิวต์บางอย่างเช่นด้านบนและผู้ปกครอง) ตัวอย่างเช่นมีหน้าเว็บที่มีที่อยู่คือ http://www.example.com/a.html หน้านี้มีโดเมนที่แตกต่างจากเฟรมเวิร์ก iframe อยู่ข้างในดังนั้นเราจึงไม่สามารถรับสิ่งต่าง ๆ ใน iframe ได้โดยการเขียนรหัส JS ในหน้า:
ในเวลานี้ Document.domain สามารถมีประโยชน์ได้ ตั้งค่าเป็นชื่อโดเมนเดียวกัน แต่ควรสังเกตว่าการตั้งค่าของเอกสารโดเมนมี จำกัด ตัวอย่างเช่น: document.domain ของเอกสารใน abexample.com สามารถตั้งค่าเป็น abexample.com, b.example.com และ example.com ได้ แต่ไม่สามารถตั้งค่าเป็น cabexample.com ได้เพราะนี่เป็นเด็ก ของโดเมนโดเมนปัจจุบันคุณไม่สามารถตั้งค่าเป็น baidu.com ได้เนื่องจากโดเมนหลักไม่เหมือนกันอีกต่อไป
ตั้งค่า document.domain ในหน้า http://www.example.com/a.html:
Document.domain ถูกตั้งค่าไว้ในหน้า http://example.com/b.html และสิ่งนี้จำเป็น
ด้วยวิธีนี้เราสามารถเข้าถึงคุณสมบัติและวัตถุต่าง ๆ ใน iframe ผ่าน JS
อย่างไรก็ตามหากคุณต้องการขอหน้า http://example.com/b.html โดยตรงผ่าน AJAX ในหน้า http://www.example.com/a.html แม้ว่าคุณจะตั้งค่าเอกสารเดียวกัน มันยังไม่ทำงาน หากคุณต้องการโต้ตอบกับหน้าของโดเมนย่อยที่แตกต่างกันผ่านวิธี AJAX นอกเหนือจากการใช้วิธี JSONP คุณยังสามารถใช้ iframe ที่ซ่อนอยู่เพื่อทำหน้าที่เป็นพร็อกซี หลักการคือการปล่อยให้ iframe นี้โหลดหน้าเว็บที่มีโดเมนเดียวกับหน้าเป้าหมายที่คุณต้องการรับข้อมูลผ่าน AJAX ดังนั้นหน้าใน iFrame นี้สามารถใช้ AJAX เพื่อรับข้อมูลที่คุณต้องการตามปกติแล้วผ่านเราฉันเพิ่งพูดถึง วิธีการแก้ไขเอกสารโดเมนช่วยให้เราสามารถควบคุม iframe นี้ผ่าน JS ได้อย่างเต็มที่เพื่อให้เราสามารถปล่อยให้ iframe ส่งคำขอ AJAX และเรายังสามารถรับข้อมูลที่ได้รับ
3. ใช้ window.name เพื่อข้ามโดเมน
วัตถุหน้าต่างมีแอตทริบิวต์ชื่อซึ่งมีคุณสมบัติ: นั่นคือในช่วงวงจรชีวิตของหน้าต่างทุกหน้าที่โหลดโดยหน้าต่างแชร์ window.name และแต่ละหน้ามี window.name สำหรับ window.name และการเขียนสิทธิ์, window.name ยังคงมีอยู่ในทุกหน้าที่โหลดโดยหน้าต่างและจะไม่ถูกรีเซ็ตเนื่องจากการโหลดหน้าใหม่
ตัวอย่างเช่น: มีหน้า a.html ซึ่งมีรหัสต่อไปนี้:
ลองดูที่รหัสของหน้า b.html:
3 วินาทีหลังจากโหลดหน้า A.HTML มันจะข้ามไปยังหน้า B.HTML และผลลัพธ์คือ:
เราเห็นว่าค่าที่กำหนดโดยหน้าก่อนหน้าของ A.HTML ไปยัง window.name ได้รับในหน้า B.HTML สำเร็จ หากหน้าโหลดทั้งหมดไม่ได้แก้ไขหน้าต่างชื่อหลังจากนั้นค่าของ window.name ที่ได้รับจากหน้าทั้งหมดเหล่านี้คือค่าที่กำหนดโดยหน้า a.html แน่นอนถ้าจำเป็นหน้าใด ๆ สามารถแก้ไขค่าของ window.name โปรดทราบว่าค่าของ window.name สามารถอยู่ในรูปแบบของสตริงเท่านั้น
ในตัวอย่างข้างต้นหน้า A.HTML และ B.HTML ที่เราใช้อยู่ในโดเมนเดียวกัน แต่ถึงแม้ว่า A.HTML และ B.HTML จะอยู่ในโดเมนที่แตกต่างกันข้อสรุปข้างต้นก็ใช้ได้เช่นกัน หลักการของการข้ามโดเมนโดยใช้ window.name
ลองมาดูวิธีรับข้อมูลข้ามโดเมนผ่าน window.name มายกตัวอย่างกันเถอะ
ตัวอย่างเช่นมีหน้า www.example.com/a.html และคุณต้องใช้ JS ในหน้า a.html เพื่อรับข้อมูลในหน้าอื่นที่อยู่ในโดเมนอื่น www.cnblogs.com/data.html .
รหัสในหน้า data.html นั้นง่ายมากซึ่งคือการตั้งค่าข้อมูลที่หน้า A.HTML ต้องการรับสำหรับหน้าต่างปัจจุบัน รหัสใน data.html:
ดังนั้นในหน้า a.html เราจะโหลดหน้า data.html ได้อย่างไร เห็นได้ชัดว่าเราไม่สามารถโหลดหน้า data.html โดยตรงโดยการเปลี่ยน window.location ในหน้า a.html เนื่องจากเราต้องการรับ data ใน data.html แม้ว่าหน้า A.HTML จะไม่กระโดด คำตอบคือการใช้ iframe ที่ซ่อนอยู่ในหน้า a.html เพื่อทำหน้าที่เป็นตัวกลางและ iframe ได้รับข้อมูลของ data.html จากนั้น A.HTML จะได้รับข้อมูลที่ได้จาก IFRame
หาก iframe ทำหน้าที่เป็น middleman ต้องการรับข้อมูลที่ตั้งค่าผ่าน window.name ของ data.html คุณจะต้องตั้งค่า SRC ของ iframe นี้เป็น www.cnblogs.com/data.html จากนั้น A.HTML ต้องการรับข้อมูลที่ได้รับจาก iframe นั่นคือเพื่อให้ได้ค่าของ window.name ของ iframe คุณต้องตั้งค่า SRC ของ iframe นี้เป็นโดเมนเดียวกันกับหน้า a.html มิฉะนั้น ก่อนหน้านี้ในกลยุทธ์ต้นกำเนิดเดียวกัน A.HTML ไม่สามารถเข้าถึงคุณสมบัติ window.name ใน iframe นี่คือกระบวนการข้ามโดเมนทั้งหมด
ดูรหัสของหน้า a.html:
รหัสข้างต้นเป็นเพียงรหัสสาธิตหลักการที่ง่ายที่สุด พร็อกซี นอกจากนี้ยังมีรหัสสำเร็จรูปที่คล้ายกันมากมายบนอินเทอร์เน็ต
ข้ามโดเมนผ่าน window.name นั่นคือ
4. ใช้วิธีการโพสต์ข้อความที่เพิ่งเปิดตัวใหม่ใน HTML5 เพื่อถ่ายโอนข้อมูลข้ามโดเมน
Window.postMessage (ข้อความ, Targetorigin) เป็นคุณสมบัติที่แนะนำใหม่ของ HTML5 , Opera, ฯลฯ เครื่องทั้งหมดรองรับ Window.postmessage วิธีการแล้ว
วัตถุหน้าต่างที่เรียกวิธีการโพสต์เมสเทอร์หมายถึงวัตถุหน้าต่างที่จะได้รับข้อความ ข้อความที่ได้รับ
วัตถุหน้าต่างที่ต้องรับข้อความสามารถรับได้โดยการฟังเหตุการณ์ข้อความของตัวเองและเนื้อหาข้อความจะถูกเก็บไว้ในแอตทริบิวต์ข้อมูลของวัตถุเหตุการณ์
การส่งข้อความที่กล่าวถึงข้างต้นไปยังวัตถุหน้าต่างอื่น ๆ จริง ๆ แล้วหมายถึงสถานการณ์ที่หน้ามีหลายเฟรมเนื่องจากแต่ละเฟรมมีวัตถุหน้าต่าง เมื่อพูดถึงวิธีการที่สองเราบอกว่าวัตถุหน้าต่างของอีกฝ่ายสามารถได้รับระหว่างเฟรมเวิร์กของโดเมนที่แตกต่างกันและวิธีการโพสต์เมสเทม นี่คือตัวอย่างง่ายๆที่มีสองหน้า
ผลลัพธ์ที่เราได้รับหลังจากเรียกใช้หน้า:
เราเห็นหน้า B นั้นได้รับข้อความสำเร็จ
มันค่อนข้างใช้งานง่ายและสะดวกในการใช้โพสต์เมสเพื่อส่งข้อมูลข้ามโดเมน แต่ข้อเสียคือ IE6 และ IE7 ไม่รองรับดังนั้นไม่ว่าจะใช้หรือไม่ขึ้นอยู่กับความต้องการที่แท้จริง