PDA

View Full Version : 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:



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:



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



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


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:


<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

jackbenimble4
02-14-2008, 11:59 PM
Okay, to make it start at a specific number change the 1 in this line:


var text = document.createTextNode("1");

to the number you'd like to start at.

Note that when the script loads, it will still load the the file specified in the src attribute of the iframe first, but then it will start at the number in the line above.