asked on

Preload pages and set cookie AFTER iframe FULLY loaded: Endless Loop

hielo answered a question here:
https://www.experts-exchange.com/questions/23743110/Set-cookie-AFTER-iframe-FULLY-loaded.html

The problem is that I get an error:
IE: "Out of memory at line 25"
FF: "too much recursion"

To test, please visit the first site then the second:
http://d9qjx79zqpo3.googlepages.com/loadxx1.html
http://d9qjx79zqpo3.googlepages.com/loadxx2.html

I think the problem is caused by calling a function inside a function but I don't know how to fix this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title>Demo</title>
</head>
<body>
<h1>Hello World</h1>
<script type="text/javascript">
 
 
 
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
 
function eraseCookie(name) {
	createCookie(name,"",-1);
}
 
var INITIAL_DELAY=1000;
var PAGES_PER_CALL=2;
var PAUSE_DURATION=2000;//milliseconds
 
window.onload=init;
 
var loadPages=new Array("http://www.google.com/","http://www.yahoo.com/","http://www.sitemaps.org/","http://en.wikipedia.org/","http://www.linux.org/","http://www.mozilla.org/","http://www.archive.org/","http://arxiv.org/","http://www.worldbank.org/","http://www.w3.org/","http://www.un.org/english/","http://www.unesco.org/","http://creativecommons.org/","http://slashdot.org/","http://www.oecd.org/","http://www.imf.org/","http://www.iop.org/","http://www.apache.org/","http://www.toefl.org/");
var counter=0;
function init(){
      document.getElementById('frameHolder').style.width="1px";
      document.getElementById('frameHolder').style.height="1px";
      document.getElementById('frameHolder').style.overflow="hidden";
      setTimeout("makeframes()",INITIAL_DELAY);
}
 
function makeframes(){
 
     var limit = loadPages.length > PAGES_PER_CALL ? PAGES_PER_CALL : loadPages.length;
     var container = document.getElementById('frameHolder');
 
	var url='url'+ counter;
 
	if(!readCookie(url))
	{
		alert(url + ' is loading now.')
		var frm  = document.createElement("iframe");
		frm.src = loadPages.shift();
		if( window.ActiveXObject )
			frm.onreadystatechange=function(){if(frm.readyState=="complete")setIt(url,frm.src);};
		else
			frm.onload=function(){setIt(url,frm.src);};
		  
		container.appendChild(frm);
	}
	else if(loadPages.length)
	{
		makeframes();
	}
return true;
}
 
function setIt(n,v){
	createCookie(n,v,30);
	++counter;
	if( loadPages.length )
	{
		makeframes();
	}
return true;
}
 
</script>
<div id="frameHolder"></div>
</body>
</html>

Open in new window

hielo

instead of:
...
else if(loadPages.length)
{
makeframes();
}
...

use:
...
else if(loadPages.length)
{
loadPages.shift();
makeframes();
}
...

hankknight

ASKER

Thanks, but it still does not work correctly.

It no longer runs out of memory.

To test, visit this page but interupt after 3 pages load in iframe
http://d9qjx79zqpo3.googlepages.com/loaderPre1.html

After three pages have loaded in iframes stop and load this page:
http://d9qjx79zqpo3.googlepages.com/loaderPre2.html

There are 17 pages that have NOT been pre-loaded. The second page should pre-load all pages that were NOT pre-loaded by the first page. But instead when I visit the second page NOTHING HAPPENS because 3 cookies have already been sent.

hielo

how do you make it stop after three pages have loaded? Did you resize the urls array? I want to loaderPre1.html and all pages loaded (because I had no previous cookies from your site), then when I go to loaderPre2.html none of the pages load. I thought that's what you were after!!!

hankknight

ASKER

I placed 37 URLs in my array.

If the visitor leaves the first page after only 3 URLs have loaded, then the rest of the URLs should be loaded on the second page. If the visitor leaves the second page and goes back to the first, unloaded pages should be loaded in the iframe.

This link demonstrates the problem:
http://d9qjx79zqpo3.googlepages.com/LoadIFRAME1.html

Sooner or later all 37 URLs should be loaded in an iframe. But now, no more than 3 are ever loaded.

If you visit the site after 10 URLs have been loaded then the next 27 URLs should be loaded.

preload.zip

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hankknight

ASKER

Thank you! It works perfectly. Now if only there was a way to disable JavaScript errors created by children and permission problems....
https://www.experts-exchange.com/questions/23765897/Disable-JavaScript-for-iframe-child.html

hielo

glad to help.

hankknight

ASKER

I have posted a related question here:
https://www.experts-exchange.com/questions/23782371/Preload-page-in-iframe-from-dynamic-array.html