จับภาพเหตุการณ์ที่สมบูรณ์ของการโหลด iframe

มีวิธีจับภาพเมื่อเนื้อหาของ iframe เต็มจากเพจหลักหรือไม่?

<iframe>องค์ประกอบมีloadเหตุการณ์สำหรับสิ่งนั้น

วิธีที่คุณฟังเหตุการณ์นั้นขึ้นอยู่กับคุณ แต่โดยทั่วไปวิธีที่ดีที่สุดคือ:

1) สร้าง iframe ของคุณโดยใช้โปรแกรม

ทำให้แน่ใจว่าloadผู้ฟังของคุณถูกเรียกใช้เสมอโดยการแนบก่อนที่ iframe จะเริ่มโหลด

<script>
var iframe = document.createElement('iframe');
iframe.onload = function() { alert('myframe is loaded'); }; // before setting 'src'
iframe.src = '...'; 
document.body.appendChild(iframe); // add it to wherever you need it in the document
</script>

2) จาวาสคริปต์แบบอินไลน์เป็นอีกวิธีหนึ่งที่คุณสามารถใช้ภายในมาร์กอัป HTML ของคุณ

<script>
function onMyFrameLoad() {
  alert('myframe is loaded');
};
</script>

<iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe>

3) คุณยังสามารถแนบตัวฟังเหตุการณ์หลังองค์ประกอบภายใน<script>แท็กได้ แต่โปรดทราบว่าในกรณีนี้มีโอกาสเล็กน้อยที่ iframe จะโหลดแล้วเมื่อคุณเพิ่ม Listener ของคุณ ดังนั้นจึงเป็นไปได้ว่าจะไม่ถูกเรียกใช้ (เช่น iframe เร็วมากหรือมาจากแคช)

<iframe id="myframe" src="..."></iframe>

<script>
document.getElementById('myframe').onload = function() {
  alert('myframe is loaded');
};
</script>

ดูคำตอบอื่น ๆ ของฉันเกี่ยวกับองค์ประกอบที่สามารถทำให้เกิดloadเหตุการณ์ประเภทนี้ได้

คำตอบทั้งสองข้อข้างต้นไม่ได้ผลสำหรับฉัน แต่สิ่งนี้ได้ผล

อัพเดท :

ดังที่ @doppleganger ระบุไว้ด้านล่างการโหลดจะหายไปเมื่อ jQuery 3.0 ดังนั้นนี่คือเวอร์ชันอัปเดตที่ใช้onไฟล์. โปรดทราบว่าสิ่งนี้จะใช้งานได้จริงบน jQuery 1.7+ ดังนั้นคุณสามารถใช้งานได้ด้วยวิธีนี้แม้ว่าคุณจะยังไม่ได้ใช้ jQuery 3.0 ก็ตาม

$('iframe').on('load', function() {
    // do stuff 
});

มีอีกวิธีหนึ่งที่สอดคล้องกัน ( สำหรับ IE9 + เท่านั้น ) ใน vanilla JavaScript สำหรับสิ่งนี้:

const iframe = document.getElementById('iframe');
const handleLoad = () => console.log('loaded');

iframe.addEventListener('load', handleLoad, true)

และหากคุณสนใจObservablesสิ่งนี้จะใช้เคล็ดลับ:

return Observable.fromEventPattern(
  handler => iframe.addEventListener('load', handler, true),
  handler => iframe.removeEventListener('load', handler)
);

โปรดทราบว่าเหตุการณ์ onload ดูเหมือนจะไม่เริ่มทำงานหากโหลด iframe เมื่อปิดหน้าจอ ซึ่งมักเกิดขึ้นเมื่อใช้แท็บ "เปิดในหน้าต่างใหม่" / w

คุณยังสามารถจับภาพเหตุการณ์ที่พร้อมใช้งาน jquery ได้ด้วยวิธีนี้:

$('#iframeid').ready(function () {
//Everything you need.
});

นี่คือตัวอย่างการทำงาน:

http://jsfiddle.net/ZrFzF/

ขั้นตอนที่ 1:เพิ่มiframeในเทมเพลต

<iframe id="uvIFrame" src="www.google.com"></iframe>

ขั้นตอนที่ 2:เพิ่ม load listener ใน Controller

document.querySelector('iframe#uvIFrame').addEventListener('load', function () {
  $scope.loading = false;
  $scope.$apply();
});