为什么这个简单的代码会使所有主要浏览器上的浏览器选项卡崩溃？答案

【问题标题】：Why is this simple code crashing a browser tab on all major browsers?为什么这个简单的代码会使所有主要浏览器上的浏览器选项卡崩溃？
【发布时间】：2014-09-27 06:30:24
【问题描述】：

我的目标是在屏幕上显示大约 100 个 URL 中的一个几秒钟，以便一次在同一个浏览器选项卡中运行数周。

我有一个非常简单的 PHP/HTML 代码，它通过元刷新来实现这一点，但是一旦我在选项卡中启动它，该选项卡将在 24 小时内崩溃，有时甚至在 4-8 小时内崩溃。这发生在 Chrome、Safari 和 Firefox 上，尽管 Chrome 似乎持续时间最长。

为什么？

https://gist.github.com/evaldasalex/5a7ee5722daeaf001b79

【问题讨论】：

所以当你说它崩溃时，到底发生了什么？有错误信息吗？标签变得无响应？

标签： html dom crash browser metadata

【解决方案1】：

纯粹的客户端 JavaScript 或 AJAX 解决方案可能比使用元刷新方法更适合您。

如果 URL 只是一个硬编码列表，那么您的解决方案可以完全在 JavaScript 端完成；无需 PHP（提供原始 HTML、CSS 和 JS 除外）。

这是一个解决方案，它遍历 URL 列表并在设定的时间间隔后更新 iframe：http://jsbin.com/lezuquma/1/edit?html,js,output

HTML：

<iframe id="fr" src="http://en.wikipedia.org/wiki/Main_Page"
        style="border: 0; width:100%; height:100%;" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>

CSS：

html, body {
  height: 100%;
  width: 100%;
}

JavaScript（注意：使用jQuery）：

$(document).ready(function() {
  var urls = [
    "http://ImportOutpost.com",
    "http://blog.appannie.com/",
    "http://health.ucsd.edu/specialties/mindfulness/schedule/Pages/default.aspx",
    "http://www.treysmithblog.com/",
    "http://en.wikipedia.org/wiki/Matrix_(mathematics)",
    "http://www.cafepress.com/cp/info/sell/index.aspx?area=openashop&page=openashop",
    "http://www.fiverr.com/categories/writing-translation/",
    "http://mashable.com/mobile/"
  ];

  var frame = $('#fr');

  setInterval(function() {
    var currentUrl = urls.shift();
    urls.push(currentUrl);

    frame.attr('src', currentUrl); 
  }, 10000);
});

如果由于某种原因无法对 URL 进行硬编码，则只需使用 AJAX 将 URL 从服务器检索到客户端，并使用我上面使用的相同方法来刷新 iframe。

我只让我的解决方案运行几分钟，所以如果你让它连续运行几个小时，它可能仍然会崩溃。根据您选择的刷新间隔，这将是一个密集的操作。

【讨论】：

感谢 Sid，但我已经尝试过使用 jQuery 进行非常类似的操作 - 它的崩溃速度甚至比使用元刷新时还要快。
@user1143919 我能问一下你为什么要这样做吗？也许有更好的方法来实现你的目标。