使用 javascript setTimeout 查看 div 是否已加载答案

【问题标题】：using javascript setTimeout to see if div has loaded使用 javascript setTimeout 查看 div 是否已加载
【发布时间】：2011-02-10 11:09:11
【问题描述】：

我正在使用动态脚本标签和 JSON 加载远程数据。我在我的网站上显示的远程页面中有一个 div，我用它来加载内容。

问题是javascript函数在页面加载时看不到div，因为它是远程数据。如果我将超时设置为大约 300，它通常可以工作，并且我的 javascript 可以看到div。但有时它需要更长的时间并且会破坏 javascript。

我正在尝试这个：

function load_content() {
  if (document.getElementById('remote_div') == null) {
    setTimeout('load_content()', 300);
  } else {
    document.getElementById('remote_div').innerHTML = 'Content goes here'
  }
}

但它只是不起作用。我做错了什么？

【问题讨论】：

为什么不使用 scriptElement.onload？
“remote_div”在哪里？如果它在 iframe 中，则您正在查询错误的 document 对象。（另外，您不必显式检查 null：if (document.getElementById('remote_div')) { ... 就足够了。）

标签： javascript json dynamic scripting settimeout

【解决方案1】：

您可能希望使用 setInterval 来执行此操作。比如：

var intrval = setInterval( function(){
  if(document.getElementById('remote_div')) {
      load_content();
       clearInterval(intrval);
 }, 50);

function load_content() {
   //loading content here
}

这样您就不必估计加载时间。 load_content 在 DOM 树中找到 div#remote_div 时执行。

基于 cmets 进行编辑，忘记分配间隔，因此确实不会清楚。

【讨论】：

这与使用setTimeout 基本相同。您必须保留来自setInterval 的返回值，以便您可以在clearInterval 中使用它，否则您将无法停止它，它会保持每秒20 次更新页面。
@Guffa：注意他是怎么称呼clearInterval的：间隔是编号的，如果这是第（数字）个，那么你可以传递那个数字。当然，这假设您正在保持并且可以跟踪使用的所有间隔（例如，没有引入脚本库）。
@Guffa：我认为不一样。如果在 setTimeout 的超时值之后 div 不存在，那就结束了。使用间隔调用，有时 div 会出现并且可以使用。我编辑了答案，所以现在间隔已经很清楚了。
@Anonymous：即使它们在实践中被编号，我也没有找到任何指定这一点的文档，只是它返回一个可以与 clearInterval 一起使用的 Id。所以，你不应该依赖那个实现细节。
@Kooilnc：是的，是一样的。该方法会调用自身直到找到元素，因此它不会在第一次迭代后结束。

【解决方案2】：

你在使用 iframe 吗？

如果是这样，请尝试

document.getElementById('YOUR_IFRAME_ID').contentWindow.document.getElementById('remote_div')

【讨论】：

我没有使用 iframe... 我严格使用带有回调的动态脚本标签的 XSS。我无法控制显示我的内容的网站，因此我需要一种方法来绕过远程数据和 ajax 的浏览器安全性。我还需要动态调整高度。一切都很好，但现在尝试加载一个 jquery 滑块，它只出现了一半的时间。当它没有出现时，我收到此错误： Uncaught TypeError: Object # has no method 'slider' 我必须加载 jquery、ui 和滑块 css... 我需要一种方法来确保这些已加载在处理 DOM 之前