SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 37

Thread: Iframe

  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    USA
    Posts
    594
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Iframe

    Is there anyway for Javascript to detect when the source url for an iframe changes?

    I want to make a page that reloads the main page when a link is clicked on the iframe.

    Is this possible?
    BKerr

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Most browsers can detect an onload event of an iframe,
    which should occur when the src changes-

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BKerr
    Is there anyway for Javascript to detect when the source url for an iframe changes?

    I want to make a page that reloads the main page when a link is clicked on the iframe.

    Is this possible?
    Code in the main page can perform periodic monitoring of changes in the location.href of a given iframe. However, the main page would require some conditional code to determine the initial source of the iframe, otherwise when it reloads it will reload the initial content of the iframe.

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    USA
    Posts
    594
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you provide an example of this?
    BKerr

  5. #5
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BKerr
    Could you provide an example of this?
    Insert this code into the main document, substitute the name of your iframe and see what happens:
    Code:
    <SCRIPT type='text/javascript'>
    /*2843294C4F47494320414C49*/
    
    ifrHREF=''; 
    myIframe='if1' /* <-- Set this to NAME of target iframe */
    
    if( window.frames[myIframe] )
     window.onload=function()
     {
      if(location.search.length)
       ifrHREF=window.frames[myIframe].location.href=location.search.substring(1);
      else
       ifrHREF=window.frames[myIframe].location.href;
     
      setInterval("monitorURL()",500);
     }
    
    function monitorURL()
    {
     if(window.frames[myIframe].location.href!=ifrHREF)
      location=location.href.split('?')[0] + '?' + window.frames[myIframe].location.href;
    }
    
    </SCRIPT>

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    USA
    Posts
    594
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I put in this:

    Code:
    <SCRIPT type='text/javascript'>
    ifrHREF=''; 
    myIframe='recruitpage' /* <-- Set this to NAME of target iframe */
    
    if( window.frames[myIframe] )
     window.onload=function()
     {
      if(location.search.length)
       ifrHREF=window.frames[myIframe].location.href=location.search.substring(1);
      else
       ifrHREF=window.frames[myIframe].location.href;
     
      setInterval("monitorURL()",500);
     }
    
    function monitorURL()
    {
     if(window.frames[myIframe].location.href!=ifrHREF)
      location=location.href.split('?')[0] + '?' + window.frames[myIframe].location.href;
    }
    
    </SCRIPT>
    </head>
    
    <body>
    
    <p>
    <iframe name="recruitpage" src="http://frenetic.hellwars.com/recruit.php?uniqid=at1158876311" width="969" height="450">
    Your browser does not support inline frames or is currently configured not to display inline frames.</iframe></p>
    I would click the link on the iframe page, it would load a new page, but would not reload the main page.
    BKerr

  7. #7
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BKerr
    I put in this:
    I would click the link on the iframe page, it would load a new page, but would not reload the main page.
    I think it needs to be placed below the <iframe> tag or it will not detect the presence of the iframe. I suggest positioning the script as the last element within the body.

  8. #8
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    USA
    Posts
    594
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That would make sense, let me try it real quick.
    BKerr

  9. #9
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali
    I suggest positioning the script as the last element within the body.
    It is generally considered better practice to use the window.onload event to trigger the script as this allows the script to be in the head or loaded from an external file.

  10. #10
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    USA
    Posts
    594
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It still doesnt reload the page
    BKerr

  11. #11
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm afraid I have to get ready for work, so I don't have time to truly dissect the script, but it appears you are not actually polling the iframe's onload event , which should be referenced by window.frames[x].onload, as I recall. Be aware that onload events for objects within the page are not terribly reliable.

  12. #12
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BKerr
    It still doesnt reload the page
    This slightly modified version can be placed inside the head if desired.

    Does your page use the onload event for anything else?

    Have you checked that there are no errors indicated in the console?

    If you are still not successful, can you post your entire page or its URL?
    Code:
    <SCRIPT type='text/javascript'>
    /*2843294C4F47494320414C49*/
    
    ifrHREF=''; 
    myIframe='if1' /* <-- Set to NAME of target iframe */
    
    window.onload=function()
    {
     if( window.frames[myIframe] )
     {  
      if(location.search.length)
       ifrHREF=window.frames[myIframe].location.href=location.search.substring(1);
      else
       ifrHREF=window.frames[myIframe].location.href;
     
      setInterval("monitorURL()",500);
     } 
    }
    
    function monitorURL()
    {
     if(window.frames[myIframe].location.href!=ifrHREF)
      location=location.href.split('?')[0] + '?' + window.frames[myIframe].location.href;
    }
    </SCRIPT>

  13. #13
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    USA
    Posts
    594
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are no errors indicated, and its the only thing on the page.

    Heres the whole html:
    HTML Code:
    <html>
    
    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    <SCRIPT type='text/javascript'>
    /*2843294C4F47494320414C49*/
    
    ifrHREF=''; 
    myIframe='recruitpage' /* <-- Set to NAME of target iframe */
    
    window.onload=function()
    {
     if( window.frames[myIframe] )
     {  
      if(location.search.length)
       ifrHREF=window.frames[myIframe].location.href=location.search.substring(1);
      else
       ifrHREF=window.frames[myIframe].location.href;
     
      setInterval("monitorURL()",500);
     } 
    }
    
    function monitorURL()
    {
     if(window.frames[myIframe].location.href!=ifrHREF)
      location=location.href.split('?')[0] + '?' + window.frames[myIframe].location.href;
    }
    </SCRIPT>
    </head>
    
    <body>
    
    <p>
    <iframe name="recruitpage" src="http://frenetic.hellwars.com/recruit.php?uniqid=at1158876311" width="969" height="450">
    Your browser does not support inline frames or is currently configured not to display inline frames.</iframe></p>
    </body>
    
    </html>
    BKerr

  14. #14
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BKerr
    There are no errors indicated, and its the only thing on the page.
    Is the domain of the iframe's content different to that of the main page, either initially or subsequently? If it is, then this technique cannot be used as it is not possible to read across domains.

  15. #15
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why use window.setTimeout when you can simply call a function when the iframes onload triggers?

  16. #16
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria
    Why use window.setTimeout when you can simply call a function when the iframes onload triggers?
    While that event is available on the latest Windows browsers, support for it is not universal.

  17. #17
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Logic Ali, in what browser doesn't it work in?

  18. #18
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    USA
    Posts
    594
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The page being loaded in the frame is from a different domain, but why does that affect it?
    BKerr

  19. #19
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The Same Origin Policy affects any attempt for a script from one domain to access a page from another, either in a frame or another window. Such access would facilitate XSS attacks (cross-site scripting).

  20. #20
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    USA
    Posts
    594
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So theres no way to refresh the main page when the iframe changes?
    BKerr

  21. #21
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BKerr
    So theres no way to refresh the main page when the iframe changes?
    You can refresh the page, but you can't restore the new iframe location because you cannot read what it is.
    What is it about your main page that causes it to need reloading?

  22. #22
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    USA
    Posts
    594
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do not want to restore the the iframe with the new page, I just want to refresh the main page when a link is clicked in the iframe. Basically, i want the iframe to go back to the orginal page when refreshed.
    BKerr

  23. #23
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since the page in the iframe is from another domain, there is no real way for you to capture an event on that page, any more than if it were in a completely separate browser window. About the only event you can poll from the containing page is a mouseover on the iframe, or the iframe's onload. You may find that an onload attribute in the iframe tag is the most reliable form of onload handler.

  24. #24
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    USA
    Posts
    594
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So would the onload attribute of the iframe change when a link is pressed? In that matter, does anything on the iframe change when a link is pressed that can be checked for a difference and make the main page reload at that time?
    BKerr

  25. #25
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the link results in the page within the iframe changing, then, yes, onload would fire when the new page finished loading. If the link is just an internal reference within the page, in other words, an anchor, no.

    Again, the page within the iframe is independent of the containing page. Except for the onmouseover or onload events, which are qualities of the iframe, not the page it contains, the contained page might as well be in another browser on another machine. Only if the page within the iframe originates from the same domain as the containing page can any communication between the two occur.


Bookmarks

Posting Permissions

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