如何在执行函数之前等待iframe刷新？

Question

I am refreshing an iframe on my page when someone clicks on an image with this code:

 $("img").click(function() {
      $('#space iframe').attr('src', function(i, val){ return val; });

      openBox();
 });

But I only want to execute openBox() function after the iframe is done refreshing.

How can I achieve something like that?

Answer 1

Using jQuery:

$('#frameId').on('load', function() {
  //code to execute after frame loaded
});

Using vanilla JavaScript:

document.getElementById('frameId').addEventListener('load', function() {
  //code to execute after frame loaded
});

Answer 2

While this isn't exactly your problem, here is how you listen for an load event on an iFrame .

HTML

<iframe id="frame"></iframe>
<button id="loadFrame">load frame</button>

JS

$("#loadFrame").click(function () {
    $("#frame").attr("src", "http://www.google.com");
    $("#frame").on("load", function () {
        alert("ad");
    });    
 });

Fiddle: http://jsfiddle.net/7RL35/4/