How to auto refresh cycle multiple website page under one browser window like screen saver?_问答_开发者

How to auto refresh cycle multiple website page under one browser window like screen saver?

开发者 https://www.devze.com 2023-01-28 18:19 出处：网络

How to refresh cycle multiple website page under one browser ? eg. I have several internal custom design website that I\'d like to display in the large LCD panel for my user, kind of screensaver like

相关专题：css javascript

How to refresh cycle multiple website page under one browser ?

eg. I have several internal custom design website that I'd like to display in the large LCD panel for my user, kind of screensaver like but this is cycling through several web URL in full screen windows (F11开发者_StackOverflow)

I agree with SLaks. You can use an iframe to load sites into your page and control which pages you show. You won't be able to control anything inside of the iframe but you will be able to show it. Also be careful of sites that will bust out of the iframe like stackoverflow.com

Here is an example that I built that I thought would be helpful in illustrating how this can be done. There is lots more that could be added to this to make it really cool, or it can be keept really simple.

Example page => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-show-multiple-pages-like-screensaver.html

<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>

You can make an <iframe> tag, then use Javascript to set its src in a setInterval callback.

One efficient way is to have one master window and some slaves one. The master window will trigger an event to the slave one (up to you then to do what you want). In that manner they should always be synchronized (which I can imagine it important in your case). Look at this post to see how to achieve this task