jQuery onload - .load() - sự kiện không hoạt động với khung nội tuyến được tải động

Question

Tập lệnh của tôi tải khung nội tuyến khi người dùng nhấp vào nút. Tôi muốn gọi một hàm khác sau khi khung nội tuyến tải, nhưng nó không hoạt động. Khung nội tuyến tải bình thường, nhưng sự kiện .load() không bao giờ được gọi sau khi khung nội tuyến tải xong. Khung nội tuyến chứa nội dung từ cùng một trang web (không có nội dung bên ngoài). Điều kỳ lạ là tôi đang sử dụng kỹ thuật tương tự được mô tả dưới đây tại một vài điểm khác trong mã của tôi và nó hoạt động hoàn hảo. Bất cứ ai có thể đề nghị những gì tôi nên kiểm tra tiếp theo?

Dưới đây là các mã có liên quan:

$('#myIframe').load(function() { 
    alert('iframe loaded'); 
}); 

$('#someButton').live('click', function() { 
    $('body').append($('<iframe id="myIframe" src="https://www.mywebsite.com" width="100%"></iframe>')); 
}); 

Answer 1

vẻ hơi tương tự cho câu hỏi ở đây:

jQuery .ready in a dynamically inserted iframe

Bằng cách này, yếu tố khung nội tuyến tồn tại trong Dom với append. Chỉ khi bạn đặt Url, nó sẽ tải, theo đó bạn đã đính kèm hàm tải mà bạn muốn gắn thẻ vào cuối. Vì vậy, đối mã của bạn

$('#someButton').live('click', function() { 

    $('body').append($('<iframe id="myIframe" width="100%"></iframe>')); 
    $('#myIframe').attr('src',"https://www.mywebsite.com"); 

    $('#myIframe').load(function() { 
     alert('iframe loaded'); 
    }); 

}); 

Answer 2

Lý do ví dụ mã của bạn không hoạt động là bởi vì bạn đang liên kết với một yếu tố đó không tồn tại, sau đó đặt yếu tố đó vào DOM khi nó không có xử lý sự kiện gắn liền với load biến cố. Hãy thử điều này:

$('#someButton').live('click', function() { 
    var $iframe = $('<iframe id="myIframe" src="" width="100%"></iframe>').load(function() { 
     alert('iframe loaded'); 
    }).attr('src', 'https://www.mywebsite.com'); 
    $('body').append($iframe); 
}); 

Hoặc gần hơn để mã origional của bạn, bạn có thể thay .load() với .live('load'):

$('#myIframe').live('load', function() { 
    alert('iframe loaded'); 
}); 

$('#someButton').live('click', function() { 
    $('body').append('<iframe id="myIframe" src="https://www.mywebsite.com" width="100%"></iframe>');//notice I removed the $() around the append code as it is unnecessary 
}); 

Answer 3

Nếu tài liệu bạn đang tải trong iframe là một cái gì đó bạn kiểm soát, hãy thử đặt handler tải vào tài liệu đó. Nếu bạn cần tài liệu gốc để làm điều gì đó sau khi tải iframe bạn có thể gọi một hàm trong phụ huynh từ các con:

// in parent doc 
function myIframeLoaded() { 
    // do something 
} 

// in iframe doc 
$(document).load(function() { // or .ready() 
    parent.myIframeLoaded(); 
} 

Answer 4

Hãy thử điều này:

$("<iframe id='myId'></iframe>").appendTo("body") 
    .attr('src', url) 
    .load(function() 
    { 
     callback(this); 
    }); 

Chỉ cần thêm một số loạt, tạo ra nguyên tố này nơi bộ chọn thường đi (điều này là có thể), và nối nó vào cơ thể.