บางครั้งคุณอาจพบกับข้อกำหนดที่ไร้สาระ เช่น การลงชื่อเข้าใช้เพียงครั้งเดียวที่ส่วนหน้า! เมื่อเจอความต้องการ ก็ต้องคิดหาทางแก้ไข
ที่นี่ ฉันจะนำเสนอโซลูชันการลงชื่อเข้าใช้เพียงครั้งเดียวส่วนหน้าแบบง่ายๆ ให้กับคุณ
สิ่งที่ใช้คือการส่งข้อมูลข้ามโดเมน postMessage และการตรวจสอบพื้นที่เก็บข้อมูล
จุดความรู้ที่ใช้ในบทความนี้คือ koa การตั้งค่าบริการทรัพยากรแบบคงที่ ข้ามโดเมน การใช้ postMessage พื้นที่เก็บข้อมูลการตรวจสอบบนพื้นที่เก็บข้อมูล
ขั้นตอนแรกคือการตั้งค่าบริการสองรายการด้วยพอร์ตที่ต่างกันเราใช้ koa2 ที่นี่เพื่อสร้างบริการสองรายการไปยังพอร์ตที่แตกต่างกันเพื่อจำลองสถานการณ์ข้ามโดเมนที่ต้องเกิดขึ้นในงานจริง
มันง่ายมากและใช้มิดเดิลแวร์ koa-static เป็นหลัก
นอกจากนี้ยังสร้างได้ง่ายมาก หากคุณต้องการเรียนรู้ความรู้เกี่ยวกับโหนด คุณสามารถเพิ่มฉันใน WeChat shouzi_1994 หรือทิ้งข้อมูลติดต่อของคุณไว้ใต้บล็อก ฉันจะไม่ลงเรื่องไร้สาระมากเกินไปที่นี่ เพียงไปที่โค้ด วิดีโอและจะมีขั้นตอนการสร้างโดยละเอียด
// localhost:4000const Koa = need('koa'); const path = need('path')const static = need('koa-static')const app = new Koa();//ตั้งค่าพาธของทรัพยากรคงที่ const staticPath = './static'app.use (คงที่ ( path.join ( __dirname, staticPath) )) console.log (บริการเริ่มต้นที่พอร์ต 4000) app.listen(4000);// localhost:3000const Koa = need('koa'); const path = need('path') const static = need('koa-static' )const app = new Koa();//ตั้งค่าเส้นทางของทรัพยากรคงที่ const staticPath = './static'app.use(static( path.join( __dirname, staticPath) )) console.log (บริการเริ่มต้นที่พอร์ต 4000) app.listen(4000);ขั้นตอนที่สอง postMessage การสื่อสารข้ามโดเมน
ก่อนอื่นเรามาดูที่ postMessage API กันก่อน
otherWindow.postMessage(ข้อความ, targetOrigin, [โอน]);
หน้าต่างอื่นๆ
การอ้างอิงไปยังหน้าต่างอื่น เช่น คุณสมบัติ contentWindow ของ iframe วัตถุหน้าต่างที่ส่งคืนโดยการเรียกใช้งาน window.open หรือ window.frames ที่มีชื่อหรือจัดทำดัชนีเป็นตัวเลข
ข้อความ
ข้อมูลที่จะส่งไปยังหน้าต่างอื่น มันจะถูกทำให้เป็นอนุกรมโดยอัลกอริธึมการโคลนที่มีโครงสร้าง ซึ่งหมายความว่าคุณสามารถถ่ายโอนออบเจ็กต์ข้อมูลไปยังหน้าต่างเป้าหมายได้อย่างปลอดภัยโดยไม่มีข้อจำกัดใดๆ โดยไม่ต้องซีเรียลไลซ์ออบเจ็กต์ด้วยตนเอง [1]
เป้าหมายต้นกำเนิด
ระบุหน้าต่างที่สามารถรับเหตุการณ์ข้อความผ่านแอตทริบิวต์ต้นกำเนิดของหน้าต่างได้ ค่าอาจเป็นสตริง (ระบุไม่จำกัด) หรือ URI เมื่อส่งข้อความ หากโปรโตคอล ที่อยู่โฮสต์ หรือพอร์ตของหน้าต่างเป้าหมายไม่ตรงกับค่าที่ TargetOrigin กำหนดไว้ ข้อความจะไม่ถูกส่ง หากทั้งสามตรงกันอย่างสมบูรณ์ ข้อความจะถูกส่งไป กลไกนี้ใช้เพื่อควบคุมว่าข้อความ Windows ใดที่สามารถส่งไปได้ เช่น เมื่อใช้ postMessage เพื่อส่งรหัสผ่าน พารามิเตอร์นี้มีความสำคัญอย่างยิ่ง และต้องแน่ใจว่าค่าของมันจะเหมือนกับแอตทริบิวต์ต้นกำเนิดของผู้รับที่ต้องการทุกประการ ของข้อความที่มีรหัสผ่านเพื่อป้องกันรหัสผ่านจากการถูกดักจับโดยบุคคลที่สามที่เป็นอันตราย หากคุณทราบแน่ชัดว่าควรส่งข้อความไปที่หน้าต่างใด ให้ระบุ targetOrigin ด้วยค่าที่ตรงกันทุกครั้ง การไม่ระบุเป้าหมายที่แน่นอนจะส่งผลให้ข้อมูลรั่วไหลไปยังไซต์ที่เป็นอันตรายซึ่งสนใจข้อมูลดังกล่าว
โอนไม่จำเป็น
เป็นสตริงของออบเจ็กต์ที่สามารถถ่ายโอนได้ซึ่งจัดส่งพร้อมกับข้อความ ความเป็นเจ้าของออบเจ็กต์เหล่านี้จะถูกโอนไปยังผู้รับข้อความ และผู้ส่งจะไม่รักษาความเป็นเจ้าของอีกต่อไป
มันง่ายที่จะเข้าใจวิธีการทำงานหรือไม่ ให้ฉันอธิบายเป็นภาษาจีน
หน้าต่างลูก (พาเรนต์) ที่จะถ่ายโอน postMessage (เนื้อหาที่ส่ง ที่อยู่ที่จะถ่ายโอน [ไม่ว่าจะถ่ายโอนสิทธิ์หรือไม่ (โดยทั่วไปไม่ได้ใช้)]);
ขอแจ้งล่วงหน้าว่าถ้าจะโอนข้ามโดเมนต้องเป็นเพจพาเรนต์-ไชด์ คือ เพจผ่าน js Open หรือเพจที่ซ้อนอยู่ใน iframe
เอาล่ะ มาเริ่มเขียนโค้ดกันดีกว่า
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>เอกสาร</title></head><body> <!-- postMessage และ iframe แก้ปัญหาข้ามโดเมนทั่วไป--> ฉันเป็นเนื้อหาของเว็บไซต์พอร์ต 3000 <button onclick=send()>ส่งข้อความถึงลูกชายของฉัน</button> <iframe style=display:none src=http://localhost:4000 frameborder=0></iframe ><script> ฟังก์ชั่น send() { window.frames[0].postMessage({a:1},http://localhost:4000); // ทริกเกอร์เหตุการณ์ข้อความของหน้าย่อยข้ามโดเมน} window.addEventListener('message', function(event) { console.info('My son wrote a letter', event); }, false);</script></body></html>
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>เอกสาร</title></head><body> <!-- postMessage และ iframe แก้ปัญหาข้ามโดเมนทั่วไป--> ฉันเป็นเนื้อหาของเว็บไซต์พอร์ต 4000 <button onclick=send()>ส่งข้อความถึงพ่อ</button> <iframe style=display:none src=http://localhost:4000 frameborder=0></iframe> <script> window.addEventListener(message,function(event){ console.log(Dad wrote:, event) },false) ฟังก์ชั่น send() { parent.postMessage({a:1}, 'http://localhost:3000'); // </script></body></html>
ณ จุดนี้ เราได้ใช้การสื่อสารข้ามโดเมนระหว่างเพจหลักและเพจย่อย แต่การสื่อสารนี้เกิดขึ้นภายในหน้าต่างเดียวเท่านั้น และไม่บรรลุผลตามที่ฉันต้องการ ฉันควรทำอย่างไร?
ติดตามการเปลี่ยนแปลงค่าและตอบสนองทันทีณ จุดนี้ทุกคนต้องคิดว่าเว็บไซต์ทั้งหมดที่มีชื่อโดเมนเดียวกันบนเบราว์เซอร์สามารถเห็นอะไรได้บ้าง
ใช่แล้ว ที่เก็บข้อมูล เราแค่ต้องติดตามเรื่องนี้
ที่นี่เราเลือกที่จะฟัง localStorage และตอนนี้เราทำการปรับปรุงหน้าย่อย
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>เอกสาร</title></head><body> <!-- postMessage และ iframe แก้ปัญหาข้ามโดเมนทั่วไป--> ฉันเป็นเนื้อหาของเว็บไซต์พอร์ต 4000 <button onclick=send()>ส่งข้อความถึงพ่อ</button> <iframe style=display:none src=http://localhost:4000 frameborder=0></iframe> <script> window.addEventListener(message,function(event){ console.log(Dad wrote:, event) var data = JSON.stringify(event.data) window.localStorage.setItem(data,data) },false) window.onstorage(function(st){ console.log(st.key,st.value) }) ฟังก์ชัน send() { parent.postMessage({a:1 }, 'http://localhost:3000'); // </script></body></html>
ดูสิ ตอนนี้เราสามารถตอบสนองต่อเนื้อหาที่ส่งข้ามโดเมนได้หรือไม่
คิดตอนนี้เราได้ประสบความสำเร็จในการสื่อสารข้ามโดเมนระหว่างสองเพจแล้ว จะทำการสื่อสารข้ามโดเมนตั้งแต่สามเพจขึ้นไปได้อย่างไร? ในความเป็นจริงมีความจริง ตอนนี้ฉันได้บอกความจริงไปแล้ว ไปสัมผัสวิธีการเขียนด้วยตัวเอง
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network