home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

ปัญหา Cross-domain HTML5 iframe แก้ด้วย postMessage

ใช้ window.postMessage() สื่อสารข้ามโดเมน

Same-Origin Policy บล็อกการเข้าถึง DOM ข้ามโดเมน postMessage เป็นทางออกมาตรฐาน

Parent Page (Receiver)

window.addEventListener('message', function(event) {
    // ตรวจสอบ origin เพื่อความปลอดภัย
    if (event.origin !== 'https://trusted-child.com') return;
    console.log('Received:', event.data);
    // ส่งกลับไปยัง child
    event.source.postMessage('ACK from parent', event.origin);
});

Child iframe (Sender)

window.parent.postMessage('Hello from child', 'https://parent.com');

เสมอตรวจสอบ event.origin และส่ง targetOrigin ไม่ใช่ '*' ใน Production