Javascript 如何在一个浏览器窗口（如屏幕保护程序）下自动刷新多个网站页面？_Javascript_Html_Css

Javascript 如何在一个浏览器窗口（如屏幕保护程序）下自动刷新多个网站页面？

javascript html css

Javascript 如何在一个浏览器窗口（如屏幕保护程序）下自动刷新多个网站页面？,javascript,html,css,Javascript,Html,Css,如何在一个浏览器下刷新多个网站页面例如，我有几个内部定制设计网站，我想在大LCD面板上为我的用户显示，有点像屏幕保护程序，但这是在全屏窗口（F11）中循环通过几个web URL，然后使用Javascript在setInterval回调中设置其src。我同意SLaks。您可以使用iframe将站点加载到页面中，并控制显示哪些页面。您将无法控制iframe内部的任何内容，但您将能够显示它。同时也要小心那些会从iframe中崩溃的站点，比如stackoverflow.com 下面是我构建的一个示例，

如何在一个浏览器下刷新多个网站页面

例如，我有几个内部定制设计网站，我想在大LCD面板上为我的用户显示，有点像屏幕保护程序，但这是在全屏窗口（F11）中循环通过几个web URL，然后使用Javascript在

setInterval

回调中设置其

src

。

我同意SLaks。您可以使用iframe将站点加载到页面中，并控制显示哪些页面。您将无法控制iframe内部的任何内容，但您将能够显示它。同时也要小心那些会从iframe中崩溃的站点，比如stackoverflow.com

下面是我构建的一个示例，我认为它有助于说明如何实现这一点。有更多的东西可以添加到这个，使它真的很酷，或者它可以保持非常简单

示例页面=>


变量站点=[
"http://www.thinkgeek.com/",
"http://www.artzstudio.com/2009/04/jquery-performance-rules/",
"http://www.example.com"
];
var currentSite=sites.length；
$（文档）.ready（函数（）{
var$iframe=$（“iframe”）.attr（“src”，”http://www.google.com");
setInterval（函数（）{
（currentSite==0）？currentSite=sites.length-1:currentSite=currentSite-1；
$iframe.attr（“src”，sites[currentSite]）；
}, 7000);
});
iframe{
身高：100%；
宽度：100%；
边界：无；
}

一种有效的方法是使用一个主窗口和一些从窗口。主窗口将触发一个事件到从窗口（由您来执行您想要的操作）。以这种方式，它们应该总是同步的（我可以想象这在您的案例中很重要）。查看以了解如何完成此任务

好的，IFrame可以加载多个URL还是仅加载一个URL？@Albert，IFrame一次只能加载一个URL。一个真正优雅的解决方案好奇的是，没有IFrame有什么方法可以做到这一点吗？

<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" charset="utf-8">
    var sites = [
      "http://www.thinkgeek.com/",
      "http://www.artzstudio.com/2009/04/jquery-performance-rules/",
      "http://www.example.com"
    ];
    var currentSite = sites.length;

    $(document).ready(function () {
      var $iframe = $("iframe").attr("src","http://www.google.com");
      setInterval(function() {
        (currentSite == 0) ? currentSite = sites.length - 1 : currentSite = currentSite -1;
        $iframe.attr("src",sites[currentSite]);
      }, 7000);
    });
  </script>  
  <style type="text/css" media="screen">
    iframe {
      height: 100%;
      width: 100%;
      border: none;
    }
  </style>
</head>
<body>
  <iframe></iframe>
</body>
</html>