1

I want to open 10 webpages one after another, in the same browser window and with some specific delay.

e.g. I want

  1. open "www.Anywebsite.com"
  2. Delay 5 seconds
  3. In the same page open a new "www.Anywebsite.com"

I am trying to do something like this

<!DOCTYPE html>
<html>
<body>

<script>
var myVar=setInterval(function(){myTimer()},1000);
var condOpen = 0;
function myTimer()

{
if (condOpen == 0)
{
window.open("http://www.tut.fi","_self"); 
condOpen = condOpen + 1;
}
else if(condOpen == 1)
{
window.open("www.w3schools.com","_self"); 
}
}
</script>

</body>
</html>

The problem is it opens only the first page, and as I read about "setInterval", it must execute the function specified after some delay. Please help me in this, I have no prior experience with JavaScript but this is needed for a particular task I am doing.

BenMorel
  • 34,448
  • 50
  • 182
  • 322
Zohaib Hassan
  • 379
  • 1
  • 4
  • 13
  • That's because you change the URL of `self`, so the interval will reset. The page will load again and still will be `condOpen = 0;` – silentw Jul 12 '13 at 09:04
  • @Reason say whaat? First it will fire the `if (condOpen == 0)`, then it will change the URL then it will add `1` to `condOpen`. BUT, it will not work as it should because the page will be redirected to `http://www.tut.fi` and the `setInterval` will be interrupted. – silentw Jul 12 '13 at 09:08
  • You'll need to rethink what you're doing here. When you load a new page in the same window, your page is *gone*, along with all of its JavaScript, timers. etc. You could open these pages in a different browser window so your own page can keep control. – Michael Geary Jul 12 '13 at 09:10
  • thanks all, @MichaelGeary I tried it doing without "_self" and it works fine, but it opens a new window for each URL, is there a possible way to update the URLs I want in only one window? I dont want it to open a new browser window for every webpage, so that in total there are 2 windows, one with the JavaScript and the other updated with a delay from the script. – Zohaib Hassan Jul 12 '13 at 09:40
  • Yes, just pick any other name and use it in the `window.open()` call instead of `"_self"`. For example, `window.open("http://www.example.com/","target");`. Use the same name `"target"` each time you call `window.open()` to reuse that same window. (`"target"` is just an example name; you can use any name here.) See the [`window.open` documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/API/window.open). – Michael Geary Jul 12 '13 at 09:57
  • I should have realized that you'll run into a problem with popup blockers. I wrote up how to fix that as an answer, along with a few other notes. – Michael Geary Jul 12 '13 at 10:24

1 Answers1

1

Your code is failing because when you call window.open() with the _self parameter, it's just like doing window.location = "http://www.example.com/";. This replaces your page with the new page you're loading. All JavaScript on your page is killed, including any timers.

You can do something like what you're trying to do here, but you would need to use a different target window name in the window.open() call. You can make up any arbitrary name here; just don't begin the name with _ to avoid the special names like _self.

Unfortunately, you will run afoul of popup blockers if you do this. In order to get past the popup blockers, what you need to do is have the first window.open() be triggered directly by a user action, e.g. by clicking a button. After that you can use the timer to change URLs in the window you've opened.

Also you will get tired of writing if statements when you want to add more URLs to your list. You can use an array of URLs to simplify the code.

And finally, it would be a really good idea to indent your JavaScript code to show its structure. Putting it all against the left margin makes it hard to follow.

Putting those together:

<!DOCTYPE html>

<html>
<head>
    <title>Window Loop Test</title>
</head>

<body>

<button onclick="start()">Start</button>

<script>
    var targets = [
        'http://www.stackoverflow.com/',
        'https://developer.mozilla.org/en-US/',
        'http://www.w3fools.com/'
    ];

    var iTarget;

    function nextTarget(){
        window.open( targets[iTarget], 'target' );
        if( ++iTarget >= targets.length ) {
            iTarget = 0;
        }
    }

    function start() {
        iTarget = 0;
        nextTarget();
        setInterval( nextTarget, 5000 );
    }
</script>


</body>
</html>

And here is a fiddle to test.

Michael Geary
  • 28,450
  • 9
  • 65
  • 75
  • @ MichaelGeary , thank you very much for the detailed answer, Its all clear and helpful to me and I am able to browse all the pages I want, Just one thing more, If I copy the "page.html" this page to my Android mobile phone and try to open it with its browser, it should work there? – Zohaib Hassan Jul 12 '13 at 13:07
  • Try the fiddle and see? It works for me in the stock Android browser and Chrome, but not in Firefox. – Michael Geary Jul 12 '13 at 16:38
  • @ Micheal Geary It worked for me in the Android browser as well as Chrome, but i am not able to run it in Internet Explorer on Windows Phone 8. It simply opens the first website in the current tab rather opening a new one to update pages. Any idea? – Zohaib Hassan Jul 23 '13 at 08:57
  • and in internet explorer 10 on desktop computer (Windows 8), it opens a new tab for every page. – Zohaib Hassan Jul 23 '13 at 09:04
  • @ZohaibHassan - I don't have any idea on the Windows Phone 8 issue, sorry, don't have a device to test with. I'm running the fiddle in IE10 on Windows 8 right now, though, and it is not opening a new tab for each page. All of the pages are opening in a single tab one by one. So I see two tabs: the first tab for the fiddle, and the second tab that switches between the other pages. Is your IE10 test with this fiddle or code adapted from it? – Michael Geary Jul 23 '13 at 20:24
  • @MichealGeary, I adapted the code from this fiddle and created an HTML page, if I open the page in Chrome or firefox, it works fine but for IE 10 it is opening a new page for every website. The same code when executed in fiddle, it works fine , This [fiddle](http://jsfiddle.net/mv2uv/4/) has the same code which is in the HTML page. – Zohaib Hassan Jul 24 '13 at 08:23
  • I tried to find out the reason behind failure on Windows Phone 8, and found [this](http://social.msdn.microsoft.com/Forums/wpapps/en-US/51745797-0d3f-4792-8904-80fa7505799c/windowopenlinkhtm-blank-doesnt-work) and it has a reply of a person from MSFT which states "A user can open a link in a new Tab by tapping and holding the link to get the context menu but an anchor or scripts request to target a new window is ignored" , and I am not really sure how can I do my test case for WP8. I had no problem with Android devices. – Zohaib Hassan Jul 24 '13 at 08:27
  • It sounds like WP8 just won't allow this. For IE10, I pasted the entire HTML content from my answer into a .html file and tested it. It works fine, after an initial warning asking if I want to allow the "popup" (actually a new tab). Then I pasted the JavaScript code from your fiddle into the file and that worked fine too (which didn't surprise me since the JS code is the same other than the longer list of sites). No idea why it would open multiple tabs when you try it. If you can post a link to a test page I could try it, but it seems like it would be the same code. – Michael Geary Jul 24 '13 at 16:19