Load Pages In Iframe, Loop

**solace85** · 02-09-2008, 03:31 AM

I haven't ever really used JS, but I want to create something that would follow this logic:

Code:

i=1
loop
{
load page "www.blahblah.com/blah" + i;
i = i + 1;
}

So it would load www.blahblah.com/blah1, after that page loads it would load www.blahblah.com/blah2, etc..... I've asked this in codingforums.com like 3 days ago and had no one even attempt to answer -.-

**jackbenimble4** · 02-09-2008, 03:55 AM

Here's an example of how this might work:

Code:

<html>
<head>
<script type="text/javascript">

function updateFrame() {
	var frame = document.getElementById("loopingFrame");
	if(!frame.count)
	{
		frame.count = 1;
	}
	else
	{
		frame.count++;
	}

	var i = frame.count;

	frame.src = "http://www.blahblah.com/blah" + i;

}
</script>
</head>
<body>
<iframe id="loopingFrame" src="http://www.blahblah.com/blah" onload="updateFrame();">        
</iframe>
</body>
</html>

This would load the new page immediately after the first page and beware because this is an infinite loop. The way it works is by setting the onload handler for the iframe to the function. Then the first time it loads, the function is run. First the function tests to see if the 'count' property is set on the iframe. If it's not, it sets it to 1; otherwise, it increments it. Then it uses this value to change the src property of the iframe to the new url. I'm not sure if this is what you wanted but this is what you asked for. If you need something a little more specific feel free to ask.

**solace85** · 02-09-2008, 05:34 AM

is there a way to make the frame size larger?

**solace85** · 02-09-2008, 05:41 AM

nvm I got it lol, thanks works great

**solace85** · 02-09-2008, 06:22 AM

ok... how about if I want it to load like....

blahblah.com/blah1
blahblah.com/blahblah1
blahblah.com/blah2
blahblah.com/blahblah2
etc...?

**jackbenimble4** · 02-09-2008, 03:02 PM

Here's how that would work:

Code:

<html>
<head>
<script type="text/javascript">

var pages = [];
pages[0] = "http://www.blahblah.com/blah";
pages[1] = "http://www.blahblah.com/blahblah";

function updateFrame() {
	// get the frame
	var frame = document.getElementById("loopingFrame");
	
	if(!pages[frame.pageIndex]) {
		// first iteration -- initialize the properties
    	frame.pageIndex = 0;
    	frame.count = 1;
    }
    else if(pages.length <= (parseInt(frame.pageIndex)+1)) {
    	frame.pageIndex = 0;
    	// we've gone through all the pages this time, increment count
    	frame.count++;
    }
    else {
    	// no need for a new number, just a new base page
    	frame.pageIndex++;
    }

    var pageIndex = frame.pageIndex;
	var i = frame.count;
	
	frame.src = pages[pageIndex] + i;

}
</script>
</head>
<body>
<iframe id="loopingFrame" src="http://www.blahblah.com/blah" onload="updateFrame();">        
</iframe>
</body>
</html>

That code allows for any number of pages. For example, you could have it load:

blahblah.com/blah1
blahblah.com/blahblah1
blahblah.com/blahblahblah1
blahblah.com/blah2

You would just have to add another element to the pages array, which would make those lines like:

Code:

var pages = [];
pages[0] = "http://www.blahblah.com/blah";
pages[1] = "http://www.blahblah.com/blahblah";
pages[2] = "http://www.blahblah.com/blahblahblah";

**solace85** · 02-10-2008, 12:43 AM

Thanks again =)

**solace85** · 02-10-2008, 05:46 AM

I'm back... how would I make it so that it shows the current value of "i" above the iframe?

**jackbenimble4** · 02-10-2008, 04:40 PM

Here's that code:

Code:

<html>
<head>
<script type="text/javascript">

var pages = [];
pages[0] = "http://www.blahblah.com/blah";
pages[1] = "http://www.blahblah.com/blahblah";

function updateFrame() {
	// get the frame
	var frame = document.getElementById("loopingFrame");
	var iCounter = document.getElementById("iCounter");
	
	if(!pages[frame.pageIndex]) {
		// first iteration -- initialize the properties
    	frame.pageIndex = 0;
    	var text = document.createTextNode("1");
    	iCounter.appendChild(text);
    }
    else if(pages.length <= (parseInt(frame.pageIndex)+1)) {
    	frame.pageIndex = 0;
    	// we've gone through all the pages this time, increment count
    	var iValue = parseInt(iCounter.firstChild.nodeValue);
    	iValue++;
    	var text = document.createTextNode(iValue);
    	iCounter.removeChild(iCounter.firstChild);
    	iCounter.appendChild(text);
    }
    else {
    	// no need for a new number, just a new base page
    	frame.pageIndex++;
    }

    var pageIndex = frame.pageIndex;
	var i = iCounter.firstChild.nodeValue;
	
	frame.src = pages[pageIndex] + i;

}
</script>
</head>
<body>
<div id="iCounter"></div>
<iframe id="loopingFrame" src="http://www.blahblah.com/blah" onload="updateFrame();">        
</iframe>
</body>
</html>

Right now it updates the content of the div with the id 'iCounter' to i. You can change the type of the html element iCounter is, but it has to remain empty.

**solace85** · 02-14-2008, 03:07 PM

ok... hopefully one last time, I tried editing the last one but apparently I can't even do that... I was trying to make it start at a certain number

Thread: Load Pages In Iframe, Loop

Thread Tools

Search Thread

Load Pages In Iframe, Loop

Bookmarks

Bookmarks

Posting Permissions