ข้อกำหนดที่ 1: จะถ่ายโอนข้อมูลจากหน้าหลัก A ไปยัง iframe B ได้อย่างไร
ด้วยวิธีนี้ หน้าหลักจะต้องส่งข้อมูลไปยัง iframe B จากนั้น iframe B จะดำเนินการประมวลผลเฉพาะหลังจากได้รับข้อมูล
วิธีการนำไปปฏิบัติ
เคล็ดลับของการนำไปปฏิบัติคือการใช้ค่าแฮชของวัตถุตำแหน่งเพื่อส่งข้อมูลการสื่อสารผ่านมัน เราเพียงต้องตั้งค่า src ของ iframe B ในหน้าหลัก A และเพิ่มสตริง #data หลังจากนั้น (data คือข้อมูลที่คุณ ต้องการผ่าน) ดังแสดงในรูปด้านล่าง แสดง:
จากนั้นใน iframe B คุณสามารถรับข้อมูลได้ที่นี่ทันทีผ่านวิธีการบางอย่าง จริงๆ แล้ววิธีการที่ใช้กันทั่วไปคือ:
1. ตั้งเวลาผ่านเมธอด setInterval ใน iframe B และติดตามการเปลี่ยนแปลงใน location.href เพื่อรับข้อมูลข้อมูลข้างต้น
2. จากนั้น iframe B จะสามารถดำเนินการประมวลผลเชิงตรรกะที่สอดคล้องกันตามข้อมูลข้อมูลนี้ได้
ข้อกำหนดที่ 2: iframe B ส่งข้อมูลไปยังหน้าหลัก A อย่างไร
ด้วยวิธีนี้ iframe B จะต้องส่งข้อมูลไปยังหน้าหลัก จากนั้นหน้าหลักจะดำเนินการประมวลผลเฉพาะหลังจากได้รับข้อมูล
วิธีการนำไปปฏิบัติ
เคล็ดลับในการใช้งานคือการใช้พร็อกซี IframeC ซึ่งฝังอยู่ใน iframe B และจะต้องยังคงอยู่ในโดเมนเดียวกันกับหน้าหลัก A จากนั้นเราจะใช้มันเพื่อใช้ประโยชน์จากหลักการใช้งานของวิธีการสื่อสารแรกด้านบนอย่างเต็มที่เพื่อถ่ายโอนข้อมูล ข้อมูลของ iframe B ถึง iframeC คำถามต่อไปคือจะให้ iframeC ส่งข้อมูลไปยังหน้าหลัก A ได้อย่างไร ดังแสดงในรูปด้านล่าง:
เนื่องจาก iframeC และหน้าหลักอยู่ในโดเมนเดียวกัน การโอนข้อมูลระหว่างกันจึงง่ายกว่ามาก วิธีการของเราที่นี่คือการใช้แอตทริบิวต์ window.top ที่ใช้บ่อย (คุณสามารถใช้ window.parent.parent ได้ด้วย) ซึ่งจะคืนค่า a อ้างอิงถึงหน้าต่างออบเจ็กต์ระดับบนสุดที่โหลดลงในเบราว์เซอร์เพื่อให้เราสามารถใช้วิธีในหน้าหลัก A ได้โดยตรง 555 ง่ายๆ
ณ จุดนี้ เราจะทำการวิเคราะห์และสรุปอย่างง่ายๆ
หลักฐานและข้อเสียที่ใหญ่ที่สุดของการใช้งานนี้คือเนื้อหาใน iframe จะต้องสามารถควบคุมได้โดยเรา แต่อย่างน้อยการใช้งานของเราจะขึ้นอยู่กับกฎความปลอดภัยของเบราว์เซอร์ และไม่ทำลายความปลอดภัยของแอปพลิเคชันเอง
รายละเอียดบางประการที่ควรพิจารณาเมื่อนำไปใช้
พยายามคำนึงถึงความสะดวกในการใช้งาน ความสามารถในการปรับขนาด และการบำรุงรักษา เช่น:
ให้แอปของบุคคลที่สามเพียงโหลดไฟล์ JS seed ที่เรามีให้ เพื่อใช้เครื่องมือต่างๆ ที่เรามีให้ได้อย่างง่ายดาย
เราจัดเครื่องมือต่างๆ ข้างต้นในรูปแบบของแพ็คเกจเพื่อเพิ่มการโหลดตามความต้องการสูงสุด
ไฟล์ JS seed ในรายการแรกจะมีเฉพาะการใช้เมธอดพื้นฐานเท่านั้น และใส่ชุดเครื่องมือที่ใช้บ่อยที่สุดไว้ในนั้น เช่น ความสามารถในการปรับตัวสูง
นอกจากนี้เรายังจัดเตรียมชุดเครื่องมือ JS ที่ใช้กันทั่วไปให้กับแอปของบุคคลที่สามผ่านไฟล์เริ่มต้น และชุดเครื่องมือที่ระบุสามารถนำมาใช้โดยตรงโดยใช้กลไกการโหลดแบบไดนามิกที่คล้ายกับโมดูล YUI3
จำแนกข้อมูลที่ส่งผ่านโดยแอปและหน้าหลักของบุคคลที่สาม (การโทรด้วยตนเอง การยืนยันการเข้าสู่ระบบ ข้อมูลที่ส่งผ่าน ฯลฯ)
ข้อมูลที่ถ่ายโอนใช้รูปแบบ JSON ที่ตรงตามข้อกำหนดเฉพาะ และถูกส่งผ่านจุดบริการแบบรวมศูนย์ หน้าหลักมีอินเทอร์เฟซบริการแบบรวมเพื่อแยกวิเคราะห์ข้อมูลและเรียกใช้วิธีการที่เกี่ยวข้องตามข้อกำหนด
นอกจากนี้ยังมีปัญหาเรื่องการควบคุมเวอร์ชัน เพื่อลดผลกระทบต่อแอปของบุคคลที่สาม เวอร์ชันของไฟล์ JS ข้างต้นทั้งหมดจึงใช้กลยุทธ์ความเข้ากันได้แบบย้อนหลัง เวอร์ชันขนาดเล็กถูกนำมาใช้โดยใช้เซิร์ฟเวอร์เพื่อตั้งเวลาหมดอายุของ แคช SQUID ที่ความถี่เฉพาะ การอัปเดตเวอร์ชันหลักจะถูกเปลี่ยนแปลงด้วยตนเองตามความต้องการของผู้ใช้
แน่นอนว่าสิ่งที่กล่าวมาข้างต้นอาจไม่ใช่วิธีแก้ปัญหาที่ดีที่สุด แต่ฉันแค่หวังว่าจะสามารถให้ความช่วยเหลือและคำแนะนำแก่คุณได้ นอกจากนี้ เรายังค่อยๆ ปรับปรุงวิธีการนำไปใช้บางอย่างของเรา เช่น การควบคุมเวอร์ชัน เรายังประสบปัญหาบางอย่างที่จำเป็นต้องแก้ไขอีกด้วย แก้ไขแล้ว
รหัสเฉพาะ
ซอร์สโค้ดของหน้าหลัก A
คัดลอกรหัสรหัสดังต่อไปนี้:
รหัสเจส
/*หน้าหลัก A*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>หน้าหลัก A</title>
<script type="text/javascript">
ฟังก์ชั่น init(){
document.domain = 'bai.sohu.com';
alert('ฉันเป็นเฟรมหลักที่ฝังอยู่ในแอปพลิเคชันบุคคลที่สาม IframeB แอปพลิเคชันจะเริ่มโหลดด้านล่าง');
var iframeTag = document.getElementById('frameB'),
iframeSrc = 'http://test.com/iframePage.html';
iframeTag.src = iframeSrc;
iframeTag.style.display = 'บล็อก';
-
ฟังก์ชั่นโทรกลับ (h) {
var iframeB = document.getElementById('frameB');
alert('IframeC เรียกอินเทอร์เฟซ (เฟรมหลัก) ของฉันและส่งความสูงของ IframeB ให้ฉัน ค่าเฉพาะคือ: ' + h);
iframeB.style.height= h + 10 + 'px';
iframeB.src += '#'+ ชม
-
</สคริปต์>
</หัว>
<body onload="init();">
<p>ฉันเป็นเฟรมหน้าแรก และโดเมนของฉันคือ: bai.sohu.com</p>
<iframe id="frameB" style="display:none;"></iframe>
</ร่างกาย>
</html>
ซอร์สโค้ดของ iframeB (iframePage.html)
คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframeB</title>
</หัว>
<body onload="init();">
<p style="height:500px;">ฉันเป็นแอปพลิเคชันบุคคลที่สาม และโดเมนของฉันคือ: test.com</p>
<iframe id="frameC" style="height:1px;width:1px;display:none;"></iframe>
</ร่างกาย>
</html>
<script type="text/javascript">
ฟังก์ชั่น init(){
alert('ฉันเป็นแอปของบุคคลที่สาม มาสร้างช่องทางการสื่อสาร IframeC ในโดเมนเดียวกันกับเฟรมหลัก ตั้งค่า src และใช้เครื่องหมาย # เพื่อส่งผ่านค่าความสูง');
var iframeTag = document.getElementById('frameC'),
iframeSrc = 'http://bai.sohu.com/iframePageC.html#',
pageHeight = document.documentElement.scrollHeight ||. document.body.scrollHeight;
iframeTag.src = iframeSrc + ความสูงเพจ;
iframeTag.style.display = 'บล็อก';
window.setTimeout(ฟังก์ชั่น(){
alert('หน้าหลักตั้งค่า src ของฉัน (IframeB) และส่งความสูงที่ได้รับผ่าน Hash (#): ' + location.hash);
},2000);
-
</สคริปต์>
ซอร์สโค้ดของ iframeC (iframePageC.html)
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript">
document.domain = 'bai.sohu.com';
alert('I (IframeC) ได้รับ iframeB ส่งค่าความสูงมาให้ฉันผ่านพารามิเตอร์ (#) ตอนนี้ฉันเรียกเมธอดหน้าหลักเพื่อตั้งค่าความสูงของ IframeB');
top.callback(window.location.href.split('#')[1]);
</สคริปต์>