延迟后加载 iFrame 的源

Posted 2023-05-09

【中文标题】延迟后加载 iFrame 的源

【英文标题】：Load the source of an iFrame after a delay

【发布时间】：2017-10-18 18:38:56

【问题描述】：

我在 Wordpress 页面上有两个 iFrame，每 10 秒自动刷新一次，我想将它们刷新的时间偏移 5 秒。我想到了在页面加载时加载一个 iframe，并在 5 秒延迟后加载第二个 iframe。

到目前为止，以下代码等待 5 秒以显示第二个 iframe，但它们最终仍会同时刷新。

我整天都在做这件事，我觉得我错过了一些非常简单的东西。

<iframe  id="delayFrame" src="http://example.com"></iframe>

这里是 jQuery：

jQuery(function($)
jQuery("#delayFrame").slideUp(300).delay(5000).fadeIn(400);  );

这是 iFrame 用于刷新的代码，位于源文件本身中：

<script type="text/javascript">
$(document).ready(function() 
    var refreshId = setInterval(function() 
    var fadeInData = function fadeInData()  $("#responsecontainer").fadeIn(); 
    var delaydata = function delayData()$("responsecontainer").delay('5000');
    var loadData = function loadData()  $("#responsecontainer").load('display.php', fadeInData); 
    $("#responsecontainer").fadeOut(loadData);
    , 10000);
$.ajaxSetup( cache: false );


);

【参考方案1】：

在一些帮助下我能够解决这个问题，所以我正在回答我自己的问题。

如果 iframe 文件在文件内部具有 .setTimeout 函数，则文件本身需要在与页面其余部分不同的时间加载，最简单的方法是切换iframe。

这是 html：

<IFRAME id="delayFrame" src=""  display:none;">
</IFRAME>

还有 jQuery：

jQuery(function($)
 setTimeout(
  function()
   
  jQuery('#delayFrame').css("display", "block"); 
  jQuery('#delayFrame').attr('src','http://example.com');
   , 5000);
 );

现在显示样式在5秒后从“none”切换到“block”，然后iframe换源，所以iFrame的.setTimeout inside是从头开始的。 p>