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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Display URL of iframe and refresh upon reload

    Hello Everyone,

    I am having trouble with a script that displays the url of an iframe. On this page, I have a single iframe and want to display the url of the iframe in a div. It works upon initial loading, but the url does not change when a link within the iframe is clicked and a new iframe page loads within the frame. My users need the ability to determine and directly link/view the iframe url.

    Here is the script
    Code:
    <iframe id="mainFrame" name="mainFrame" class="inner-center" frameborder="0" scrolling="auto" width="100%" height="400"
       src="whats_new.htm"></iframe>
       <p>
       <div class="footer"><script type="text/javascript" language="JavaScript">
    <!--document.write('<input type="text" style="width:100%; " ');-->
    document.write( document.getElementById('mainFrame').src);
    </script>
    </div>
    I am a js novice and trying to figure out what to research and implement. Can you reload the content in the div? do I want to look at cross-frame scripting? Any help would be greatly appreciated.

    Best regards,

    Eiger

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Let's look at this logically. When your page loads in the browser initially, the HTML is parsed (read) from "top to bottom." Actually it's "beginning to end" - but it may help to see it as a text file - and any script statements outside of functions are executed immediately. This also includes downloading any scripts with the src property set and treating them as if they were actually written there. So your iframe is created:

    Code:
    <iframe id="mainFrame" name="mainFrame" class="inner-center" frameborder="0" scrolling="auto" width="100%" height="400"
       src="whats_new.htm"></iframe>
    (unclear why you didn't put all those attributes in your CSS)

    ... and then this is parsed;

    Code:
       <p>
       <div class="footer"><script type="text/javascript" language="JavaScript">
    <!--document.write('<input type="text" style="width:100%; " ');-->
    document.write( document.getElementById('mainFrame').src);
    </script>
    </div>
    A paragraph element, then a div, are created; then your script runs (you can skip the 'language' attribute) and document.write outputs the src of the iframe just created into the 'document stream' writing it right there - just as if you had harcoded it in. The script ends, parsing continues.

    You can probably see where this is going: why would you expect a change of src in the iframe to run that script again? The document stream is long closed, and - trust me on this - the last thing you want to do is re-open it. All post-load modification uses more delicate techniques. Keep in mind that, back in the Dark Ages when few items in a loaded web page were exposed for scripting dynamically, outputting HTML to a document in the process of loading was considered the greatest thing since sliced cheese. Now it's still useful, but only during initial load, or in a seperate window (or frame) object. Scripting it from within a loaded doc is JS suicide, so to speak. IE let's you get away with it, sort of. Don't.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>untitled</title>
    </head>
    <body>
    <iframe id="mainFrame" name="mainFrame" class="inner-center" frameborder="0" scrolling="auto" width="100%" height="400"
       src="whats_new.htm"></iframe>
       <p>
       <div id="footer" class="footer"></div>
       </p>
    <script type="text/javascript">
    var src = document.getElementById('mainFrame').src;
    document.getElementById('footer').appendChild(document.createTextNode(src));
    </script>
    </body>
    </html>
    You can do this programmatically, but there's an issue with getting the url of an iframe from another domain: you can't. Not without a fight at least. Google "iframe same origin policy" to see why.

    http://www.dyn-web.com/tutorials/iframes/

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Adios,

    Thanks for taking the time to answer my question. I appreciate it. I will continue to look for a work-around.

    Best regards,

    Eiger

  • #4
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Eiger,

    I am having the same/very similar issue. Within the host I am using to edit my site, I have designed and coded a template for my website (background, placement of "div's" and navigation links) within an HTML file. I uploaded this file and call it to each page using an iframe - I am calling the base template to each main navigation and sublink within my website. So basically, my back-end look and functionality is called and edited from one file, and each page has only text content - not really any coding at all.

    Upon initial load of one of my navigation links, it works flawlessly - the page is loaded and looks exactly how it is supposed to. However, when I select a different subpage to navigate to, the new page content overlays the previous - text, images, everything. This happens with all subsequent clicks of the mouse to different pages within my website. In addition, the URL does not change from the parent (www."name of site".com), the first linked page loads but the URL doesn't change.

    All I need is a snippet of code that tells the browser to follow the actual URL link and load each page independently, not stack them.

    I realize quite some time has passed but if anyone has found a solution to what I am referring to, would you send it my way?


  •  

    Tags for this Thread

    Posting Permissions

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