javascript - 仅在加载 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

您应该更改 iframe srcdocument.ready以使其触发您的 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

});