仅在加载iframe页面时显示DIV

Question

我在DIV中有一个iframe页面，我只希望在iframe页面加载/可用后显示DIV。 如果iframe页面未加载/不可用，则根本不显示DIV。

我写了一些JS然而它没有按照我的预期工作，无论iframe页面是否可用，DIV仍会显示。

码：

<div class="ad-container" style="display:none">
   <iframe src="//oonagi.org" border="0" scrolling="no" allowtransparency="true" width="500" height="300"></iframe>
</div>

var adContainer = $('.ad-container');
// check if ad container exist
if(adContainer.length > 0) {
  // only show ad once iframe page is loaded
  adContainer.find('iframe').load(function() {
    adContainer.css('display', 'block');
  });
}

Answer 1

你应该在document.ready更改iframe src以使它激活你的iframe加载事件。你可以试试这个：

$(document).ready(function() {

    $('#frame').bind('load', function() { //binds the event
        $('#ad-container').show();
    });

    var newSrc = $('#frame').attr('src') + '?c=' + Math.random(); //force new URL
    $('#frame').attr('src', newSrc); //changing the src triggers the load event

});