为什么这个简单的代码会崩溃所有主流浏览器上的浏览器选项卡?

时间:2014-08-04 17:43:42

标签: html dom crash browser metadata

我的目标是在屏幕上显示100个左右的网址中的一个,持续几秒钟,以便在同一浏览器标签中一次运行数周。

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

为什么?

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

1 个答案:

答案 0 :(得分:0)

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

如果URL只是一个硬编码列表,那么您的解决方案可以完全在JavaScript端完成;不需要PHP(除了提供原始的HTML,CSS和JS)。

以下解决方案遍历网址列表,并在设定的时间间隔后更新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的相同方法。

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