...

View Full Version : Changing iframe source with processing page in between



brendon99
06-23-2004, 04:27 AM
Hi,

I asked a similar question about this issue a while ago, and received a great answer. However, I've now re-arranged some of the forms I was working with, and have become stuck again.

I have an iframe, which the source page is "options.htm". By clicking on a button in "options.htm", I want to change the iframe source to "outlet.htm". I can accomplish this fine; however, "outlet.htm" takes a while to render, since the content is large. I want to display a "please wait...processing" in the meantime whilst the page renders out.

Below is the code from clicking on the button in "options.htm":

function show_processing()
{
// This function displays a processing sign on the screen
// Also updates the outlet XML file with the details of gapfills or dispensers as requested

var fv_gap_fill = document.getElementById("fgapfill").checked
var fv_dispenser = document.getElementById("fdispenser").checked

parent.document.getElementById('iframe2').src = 'javascript:load_page()';

if (fv_gap_fill == true)
{setTimeout('load_gap_fills()',100)}
if (fv_dispenser == true)
{setTimeout('load_dispensers()',100)}

return false;
}


function load_page()
{
// This function is called from Show_Processing, presenting a processing screen
var sHTML = '<body style="font:bold 20px arial;color:#933;text-align:center;">';
sHTML += '<br /><br /><br /><i>Processing....please wait....</i>';
sHTML += '<script type="text/javascript">{parent.document.getElementById("iframe2").src="outlet.htm"}</script></body>';
return sHTML;
}

Any help would be appreciated,

thanks

glenngv
06-23-2004, 04:52 AM
Try this:


in option.htm:

function show_processing(){
parent.load_page('outlet.htm');
}


in parent page:

function load_page(url)
{
//this loads a non-image file with a "smart" loading status message
var sHTML = '<html><body style="font:bold 20px arial;color:#933;text-align:center;">';
sHTML += '<br /><br /><br /><i>Processing....please wait....</i>';
sHTML += '</body></html>';
var ifr2 = document.getElementById('iframe2');
ifr2.document.write(sHTML);
ifr2.document.close();

//image trick
var page = new Image();
page.onerror = function(){ //this will be triggered since we're about to load a non-image file
ifr2.location.href = url; //change iframe src
}
page.src = url; //the browser tries it to load, in effect preloading it
}

I used that technique in the "Popup DocViewer" script in my sig.

brendon99
06-23-2004, 07:24 AM
Trying it out.... however, it seems to be changing the frame containing iframe2, then crashes with an error, stating ifr2.location is null or not an object. Seems as though the "GetElementByID" isn't working. I'll keep looking into it....

glenngv
06-23-2004, 08:01 AM
Let me verify if I understand the structure of your pages.

You have a main page that contains an iframe with an id "iframe2".
In the iframe2 page (options.htm), you have a button to change its url to outlet.htm. Before changing the url of iframe2, you want to display a "loading..." status message in it.

Is my understanding correct?

brendon99
06-23-2004, 09:25 AM
Hi,

sorry for the delay.

yes, thats correct, except that the main page is actually an iframe. iframe2 is within iframe1, which is then in the main page.

glenngv
06-23-2004, 09:36 AM
So you have to put the load_page() function that I posted in iframe1

brendon99
06-23-2004, 09:47 AM
Yep - although I put in outlet.htm by accident at first - but now its in the right position.

If I put "alert(ifr2.src)" after obtaining the handle:
var ifr2 = document.getElementById('iframe2');

...it tells me that the src is "options.htm" which is correct.

:confused:

glenngv
06-23-2004, 10:16 AM
Got a link?

brendon99
06-24-2004, 01:57 AM
Unfortunately not - this is part of an HTA application.

The line:
ifr2.document.write(sHTML);

seems to be overwriting the whole page, thus removing "iframe2". The next line which tries to set href then errors, as does the last, since the frame no longer exists.

brendon99
06-24-2004, 02:08 AM
Ok, whipped together a quick code example using the function.

This is the main hta containing the iframe2; iframe2 is set to "options.htm", when clicking on the button in "options.htm", it calls "load_outlet(url)", which should then show a processing page, then outlet. However, its just refreshing the whole screen, thus destroying iframe2:

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

//Test function
function load_outlet(url)
{
//this loads a non-image file with a "smart" loading status message
var sHTML = '<html><body style="font:bold 20px arial;color:#933;text-align:center;">';
sHTML += '<br /><br /><br /><i>Processing....please wait....</i>';
sHTML += '</body></html>';
var ifr2 = document.getElementById('iframe2');
ifr2.document.write(sHTML);
ifr2.document.close();

//image trick
var page = new Image();
page.onerror = function(){ //this will be triggered since we're about to load a non-image file
ifr2.location.href = url; //change iframe src
}
page.src = url; //the browser tries it to load, in effect preloading it
}

}
</script>

<BODY scroll="no" bgcolor="#C0C0C0">

<iframe name="frame2" id="iframe2" width="103%" height="100%"
src ="options.htm" APPLICATION="yes" TRUSTED="yes" style="position:relative;top:12;left:-12" >
</iframe>

</BODY >
</html>

...hope this helps....browser is also IE 6+....

glenngv
06-24-2004, 04:06 AM
Use name attribute instead of id in the iframe tag:

<iframe name="iframe2" width="103%" height="100%"...>

Then change this line:

var ifr2 = document.getElementById('iframe2');

to:

var ifr2 = window.frames['iframe2'];


This line is already correct now:

ifr2.location.href = url; //change iframe src


but you can change it to:

ifr2.location.replace(url); //change iframe src


so that the "Loading..." status is replaced in the history.

brendon99
06-29-2004, 04:28 AM
Yes!, I finally got it working, thanks.....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum