ตรวจจับเมื่อโหลดเนื้อหา Iframe (ข้ามเบราว์เซอร์)

ฉันกำลังพยายามตรวจสอบเมื่อ iframe และเนื้อหาโหลด แต่ไม่มีโชคมากนัก แอปพลิเคชันของฉันป้อนข้อมูลในช่องข้อความในหน้าต่างหลักและอัปเดต iframe เพื่อให้ 'แสดงตัวอย่างสด'

ฉันเริ่มต้นด้วยรหัสต่อไปนี้ (YUI) เพื่อตรวจจับเมื่อเหตุการณ์โหลด iframe เกิดขึ้น

$E.on('preview-pane', 'load', function(){
    previewBody = $('preview-pane').contentWindow.document.getElementsByTagName('body')[0];
}

'Preview-pane' คือ ID ของ iframe ของฉันและฉันใช้ YUI เพื่อแนบตัวจัดการเหตุการณ์ อย่างไรก็ตามการพยายามเข้าถึงเนื้อหาในการเรียกกลับ (เมื่อโหลด iframe) ล้มเหลวฉันคิดว่าเป็นเพราะ iframe โหลดก่อนที่ตัวจัดการเหตุการณ์จะพร้อม รหัสนี้ใช้งานได้หากฉันชะลอการโหลด iframe โดยสร้างสคริปต์ php ที่สร้างโหมดสลีป

โดยทั่วไปฉันกำลังถามว่าอะไรคือแนวทางที่ถูกต้องในเบราว์เซอร์ในการตรวจจับเมื่อ iframe โหลดและเอกสารพร้อมแล้ว?

เพื่อตรวจจับเมื่อโหลด iframe และเอกสารพร้อม?

เหมาะอย่างยิ่งหากคุณสามารถรับ iframe เพื่อบอกตัวคุณเองจากสคริปต์ภายในเฟรม ตัวอย่างเช่นมันสามารถเรียกใช้ฟังก์ชันหลักโดยตรงเพื่อบอกว่าพร้อม จำเป็นต้องใช้ความระมัดระวังในการเรียกใช้รหัสข้ามเฟรมเนื่องจากสิ่งต่างๆสามารถเกิดขึ้นได้ตามลำดับที่คุณไม่คาดคิด อีกทางเลือกหนึ่งคือการตั้งค่า 'var isready = true;' ในขอบเขตของตัวเองและมีสคริปต์หลัก sniff สำหรับ 'contentWindow.isready' (และเพิ่มตัวจัดการ onload ถ้าไม่มี)

หากด้วยเหตุผลบางประการที่ไม่สามารถใช้งานเอกสาร iframe ร่วมกันได้จริงแสดงว่าคุณมีปัญหาการแข่งขันโหลดแบบดั้งเดิมกล่าวคือแม้ว่าองค์ประกอบจะอยู่ติดกัน

<img id="x" ... />
<script type="text/javascript">
    document.getElementById('x').onload= function() {
        ...
    };
</script>

ไม่มีการรับประกันว่าไอเท็มจะไม่โหลดตามเวลาที่สคริปต์ทำงาน

วิธีการออกจากการแข่งขันคือ:

1. บน IE คุณสามารถใช้คุณสมบัติ 'readyState' เพื่อดูว่ามีบางสิ่งถูกโหลดหรือไม่

2. หากยอมรับรายการที่มีเฉพาะเมื่อเปิดใช้งาน JavaScript คุณสามารถสร้างแบบไดนามิกโดยตั้งค่าฟังก์ชันเหตุการณ์ 'onload' ก่อนตั้งค่าแหล่งที่มาและต่อท้ายหน้า ในกรณีนี้จะไม่สามารถโหลดได้ก่อนที่จะตั้งค่าการโทรกลับ

3. วิธีที่โรงเรียนเก่ารวมไว้ในมาร์กอัป:

   <img onload="callback(this)" ... />

ตัวจัดการ 'onsomething' แบบอินไลน์ใน HTML มักเป็นสิ่งที่ผิดและควรหลีกเลี่ยง แต่ในกรณีนี้บางครั้งก็เป็นตัวเลือกที่แย่ที่สุด

ดูนี้โพสต์บล็อก ใช้ jQuery แต่ควรช่วยคุณแม้ว่าคุณจะไม่ได้ใช้งานก็ตาม

โดยทั่วไปคุณจะเพิ่มสิ่งนี้ลงในไฟล์ document.ready()

$('iframe').load(function() {
    RunAfterIFrameLoaded();
});

สำหรับผู้ที่ใช้ React การตรวจจับเหตุการณ์โหลด iframe ที่มาเดียวกันนั้นทำได้ง่ายเพียงแค่ตั้งค่าonLoadevent listener บนองค์ประกอบ iframe

<iframe src={'path-to-iframe-source'} onLoad={this.loadListener} frameBorder={0} />

สำหรับทุกคนที่ใช้ Ember สิ่งนี้ควรได้ผลตามที่คาดไว้:

<iframe onLoad={{action 'actionName'}}  frameborder='0' src={{iframeSrc}} />