Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Aug 2003
    Location
    Sydney Australia
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing iframe source with processing page in between

    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

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Try this:
    Code:
    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.

  • #3
    New Coder
    Join Date
    Aug 2003
    Location
    Sydney Australia
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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....

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    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?

  • #5
    New Coder
    Join Date
    Aug 2003
    Location
    Sydney Australia
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    So you have to put the load_page() function that I posted in iframe1

  • #7
    New Coder
    Join Date
    Aug 2003
    Location
    Sydney Australia
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Got a link?

  • #9
    New Coder
    Join Date
    Aug 2003
    Location
    Sydney Australia
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    New Coder
    Join Date
    Aug 2003
    Location
    Sydney Australia
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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+....

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    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.

  • #12
    New Coder
    Join Date
    Aug 2003
    Location
    Sydney Australia
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes!, I finally got it working, thanks.....


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •