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 15 of 15
  1. #1
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    external link loads pages in two i-frames

    ____My website has 2 iframes. As explained in its homepage, the iframes are useful because links in each page "open in the other frame, so you can click links without losing your place in the current page. And you can see both pages at the same time, making it easier for you to mentally combine what both are saying about the same topic, which is especially valuable for combining visual & verbal information."
    ____But there is a problem: An external link (from another website, or when I'm in a discussion forum with other educators) opens a page in the whole window, not in one of two iframes. In the early days of building this website (January 2) I asked "is there a way to fix this?" and Old Pedant said "yes" but I gave up too quickly and didn't continue the thread. Recently, I sent him a private message saying "I want to start a new thread, so when would be a good time for this, so you can participate?" Instead, he simply shared a JavaScript solution, and (after some adapting to fit my situation, and a few more emails) it worked. This JS-code does some very useful things (more than I originally had hoped) so I'm sharing it.

    ____You can first see the code in action, and then see the code.
    ____My "index.htm" page defines two iframes, and loads two pages (sitemap.htm & home.htm) into the left & right frames. This happens in the first two links below, which do nothing new or special. But the *-URL loads a different page (I've chosen dp.htm) into a frame (I've chosen the right iframe). The #-URL loads two new pages, and takes you to a specific anchor-location within each. Wow, that's cool, and will be very useful.
    https://mywebspace.wisc.edu/crusbult/web/design/
    https://mywebspace...design/index.htm?left=sitemap.htm&right=home.htm
    * https://mywebspace...design/index.htm?left=sitemap.htm&right=dp.htm
    # https://mywebspace...design/index.htm?left=mc-sk.htm%23pf&right=wy.htm%23transfer
    [note: in the #-URL, %23 replaces the usual # that takes you to the anchor-location, pf or transfer]

    ____Below, I've included only the body-code, since it's sufficient to do "the cool things" in the URLs marked * and #. If you want to see the head-code -- which defines the iframe characteristics (a 50-50 horizontal split, automatic scrollbars, etc) -- use "View Page Source" of your browser, for index.htm
    The code is followed by explanations of its functions.
    Code:
    <body>
    <div id="wrapper">
    <div id="idleft"><iframe id="left" iframe name="left" src="sitemap.htm" height="95%" width="100%" frameborder="1" scrolling="auto"></iframe></div>
    <div id="idright"><iframe id="right" iframe name="right" src="home.htm" height="95%" width="100%" frameborder="1" scrolling="auto"></iframe></div>
    </div>
    
    <script type="text/javascript">
    var qs = location.search;
    if ( qs.length > 1 )
    {
        var pairs = qs.substring(1).split("&");
        for ( var p = 0; p < pairs.length; ++p )
      {
        var pair = pairs[p].split("=");
        if ( pair[0] == "left" || pair[0] == "right" )
      {
        var iframe = document.getElementById(pair[0]);
        iframe.src = decodeURIComponent( pair[1] );
         }
       }
    }
    </script>
    </body>
    I did controlled experiments to discover the function done by each part of
    <div id="idleft"><iframe id="left" iframe name="left" src=.....>,
    __ "div id" (along with head-info and "src=.....") defines the iframes format & content);
    __ "iframe id" is needed to make external URLs (like * and #) load different pages;
    __ and "iframe name" makes inside-the-website links work properly to load pages into "the other frame", as with
    <a href="wy.htm#transfer" target="left">the benefits of transfer</a>
    which could be a link in dp.htm, a page that is designed to be in the right-side frame so its links open in the left frame.
    __ And the javascript -- when its variables (left, right) are matched with each "iframe id" (left, right) -- makes external links, like * and #, "do some very useful things."

    Thanks, Old Pedant, for the JS-code and for patiently helping me make it work in the context of my website. Craig
    Last edited by craigr7; 06-20-2012 at 04:30 PM. Reason: to highlight terms in code

  • #2
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    a question - "forcing" a link to open iframes?

    Now I have a question:
    ____Using the javascript I described yesterday, or with another method, is there a way to force a REGULAR external incoming link that isn't modified* -- from a search engine (Google, Yahoo, Bing,...) or from a page inside another website -- to open in one of two iframes? For example, imagine that the incoming link is for dp.htm, and I want the response to put sitemap.htm in the left-side iframe, and put dp.htm in the right-side iframe.
    ____* Yesterday's javascript requires that a link be intentionally modified by adding "?" (and maybe "&" and "%23") but this modifying would not occur in a link from Google, which would be a simple "...dp.htm" instead of the "...dp.htm?right=dp.htm" that is required to put dp.htm into the right-side frame.
    ____BTW, I don't have any control over the website-server (it's at UW), and I don't think UW would customize what they're doing for me, so any solutions that require changes in the server's behavior won't work for my situation.
    Craig
    Last edited by craigr7; 06-21-2012 at 11:38 PM. Reason: to clarify

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    I'm sorry, I can't make sense of that.

    The URL that opens the main page is something like
    Code:
        http://www.wisc.edu/yoursite/index.html
    right?

    And you append stuff to that to specify content in the iframes *OTHER* than what you would normally present, right?
    Code:
        http://www.wisc.edu/yoursite/index.html?left=nav.html
    SO just where would Google produce this magic URL from??? Presumably, it got it from crawling your site, no??

    Or are you saying that if Google crawls your site and finds "nav.html" then when somebody uses Google and it remembers that "nav.html", what you *really* want to have happen is that the URL the user sees is
    Code:
        http://www.wisc.edu/yoursite/index.html?left=nav.html
    ????

    If so, that's not too hard to do. But I won't show code until I really understand what you are asking for.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    are you saying that if Google crawls your site and finds "nav.html"
    Yes, that's one situation that would produce the problem of having "nav.html" open full-window, without being in a half-window iframe where it should be.
    what you *really* want to have happen is that the URL the user sees is
    Code:
    http://www.wisc.edu/yoursite/index.html?left=nav.html
    I want a regular link to nav.html (which doesn't have the special prefix, index.html?left=) to behave as if the whole thing (index.html?left=nav.html) was there, so it gets loaded into one of two half-window iframes.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Easy enough.

    Code:
    <body>
    <head>
    <script type="text/javascript">
    if ( this == top )
    {
        location.href = "index.html?left=nav.html";
    }
    </script>
    ...
    In this situation, this refers to the current window. top is a reference to the top window in a set of frames or iframes. So if we discover that the current page is in the top window, instead of in an <iframe> where it belongs, we just reload the current window (which of course we know is the top window) with the page with the iframes.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    craigr7 (06-22-2012)

  • #6
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    if we discover that the current page is in the top window... we just reload the current window (which of course we know is the top window) with the page with the iframes.
    This is logical, it works, and does what I wanted.
    ____But another way for nav.html to try loading into the top-frame (so it will get intercepted by this javascript) is to right-click on its frame and say "Open Frame in New Window." It might be nice to keep this "New Window" option available for viewers.
    ____Is it possible to have one of these two top-frame situations (from an incoming link) get converted into a half-window iframe, but have this not happen for the other situation (for "Open Frame in a New Window)? If this is impossible (which seems likely), I'll have to decide which is more important, to have a regular incoming link iframed, or to keep the "New Window" option available.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Hmm...yes, we could do that.

    Have the "click in this frame" code do something like
    Code:
    <a href="nav.html?top" target="_blank">Open frame in new window</a>
    And then the code in nav.html first looks for that query string to say "top" and, if so, suppresses the other action.
    Code:
    <body>
    <head>
    <script type="text/javascript">
    if ( this == top && location.search.substring(0,4) != "?top" )
    {
        location.href = "index.html?left=nav.html";
    }
    </script>
    ...
    And of course we could get fancier than that, if needed.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Hmm...yes, we could do that.
    Yes, it works for making an in-page link to "Open Frame in a New Window" which keeps this option available, providing this practical functionality for the website. Thanks, as usual.
    ____A right-click and choosing "Open Frame in a New Window" still puts the page into a half-window iframe. This could be frustrating for a user who hasn't yet found the "...New Window" link. But is this unavoidable (it seems to be), sort of like it's impossible to have gravity-force when this is useful (to keep me from floating away) but not when I've just dropped a glass plate full of delicious food?

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    LOL! Nice analogy.

    You *could* put in a right-click detector that tells the person to just click in the frame, instead, but that leads to a whole host of other things you need to check for.

    I would just make the "Open frame in new window" message as clear as possible.

    I *CAN* think of a way that might work, using cookies instead of the "?top" trick. But how complex do you want this to get to be?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    You *could*... but that leads to a whole host of other things you need to check for...; how complex do you want this to get to be?
    how complex? Just the level it's at now. Your quick-and-easy script provides the functionality I wanted -- for this and, more important, for external links of both types (that do and don't include special extras like "?right=nav.html" in the URL) -- and now I can return to complex questions about education.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    I was afraid you would ask.

    What you would do is *NOT* put the "?top" on in any case.

    Instead, in the code that process the "?left=nav.html" you would *first* set a cookie.

    Then "nav.html" would look for the cookie. If the cookie is found, then it does *NOT* move itself to the top window (and then clears the cookie).

    But... This would mean that even for your default <iframe> content you would need to do the same thing. Makes even your base code more complex.

    I truly don't think this one is worth it. The worst that happens is that somebody right clicks, show the <iframe> in new window, the new window ends up with the <iframe> back in places, and *then* the dumb user actually reads the page and sees your "open in new window" link and uses it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    *SIGH* As my grandma used to say: "Too soon we get too late too smart."

    Instead of a cookie, just pass a "suppressor" in the query string.

    So when you see
    Code:
        index.html?left=nav.html#23foo
    
    Code:
    upon loading you do
    var iframe = document.getElementById(pair[0]); var temp = decodeURIComponent( pair[1] ).split("#"); iframe.src = temp[0] + "?inframe" + (temp.length > 1 ? "#" + temp[1] : "");
    See it? And then your "nav.html" page just looks for the "?stay" instead, and does
    Code:
    if ( this == top && location.search.substring(0,8) == "?inframe" )
    {
        location.href = "index.html?left=nav.html";
    }
    And now you just have to create the main page to have the "?inframe" on the default <iframe> src's.

    Code:
        <iframe src="defaultLeft.html?inframe" ...>
    So now the only time a page does NOT lift itself out of the frame is if it sees "?inframe" as part of the URL.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Instead of a cookie, just pass a "suppressor" in the query string.
    Below is the code in two pages, so you can check for any errors in using it. The first page is index.htm -- my page that defines iframes and loads them with sitemap.htm (on left) and home.htm (on right); the changes -- compared with the original code, which is in the first message of this thread -- are highlighted in bold or bold-red. I'm less confident about the correctness of the bold-red changes.
    Code:
    <body>
    <div id="wrapper">
    <div id="idleft"><iframe id="left" iframe name="left" src="sitemap.htm?inframe" height="95%" width="100%" frameborder="1" scrolling="auto"></iframe></div>
    <div id="idright"><iframe id="right" iframe name="right" src="home.htm?inframe" height="95%" width="100%" frameborder="1" scrolling="auto"></iframe></div>
    </div>
    
    <script type="text/javascript">
    var qs = location.search;
    if ( qs.length > 1 )
    {
      var pairs = qs.substring(1).split("&");
      for ( var p = 0; p < pairs.length; ++p )
     {
      var pair = pairs[p].split("=");
      if ( pair[0] == "left" || pair[0] == "right" )
     {
        var iframe = document.getElementById(pair[0]);
        var temp = decodeURIComponent( pair[1] ).split("#");
        iframe.src = temp[0] + "?inframe" + (temp.length > 1 ? "#" + temp[1] : "");
        }
      }
    }
    </script>
    </body>
    Nothing new happened, with these changes to "index.htm" and no changes to "tr.htm", which is the second page I changed.
    ____note: In my website I'll put "tr.htm" into the right-side iframe, which is analogous to your code putting "nav.html" into the left-side frame. I think all of this was done correctly, because everything worked OK before the most recent changes, which are bold-highlighted below.
    ____I retained the line for "Open This Frame in a New Window", and tried it two ways, both with "?top" and "?inframe", although I think this line is now irrelevant, neither helpful nor harmful, since this link should now be unnecessary.
    ____As for "index.htm" I'm less confident about the bold-red, so I tried four experiments, with the bold-red changes (adding ?inframe) used only in "index.htm" (I think this is what you mean by "the main page" that includes "defaultLeft.html"); and only in "tr.htm"; and (much less likely to be correct) in both, and in neither.
    ____results: In all 4 experiments, the framing failed, and tr.htm opened in a new full-width window. This happened when I entered "tr.htm" as the URL, and after a right-click and choosing "Open Frame in a New Window", so it seems that the change from the original js (with "...(0,4)...") to this js (with "...(0,8)..." destroyed the functionality. Probably because I made a mistake in actualizing your script in my two pages.
    Code:
    <a href="tr.htm?top" target="_blank">Open This Frame in a New Window</a>
    
    <script type="text/javascript">
    if ( this == top && location.search.substring(0,8) == "?inframe" )
    {
        location.href = "index.htm?right=tr.htm?inframe";
    }
    </script>
    I put this script into the body, although (from previous experiments) it worked ok in either head or body, and I think this is why your code began with the ambiguous "<body><head>" since it doesn't matter.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Okay...here is a complete set of three working files (only files for the right <iframe>).

    FILE: index.html
    Code:
    <html>
    <head>
    <style type="text/css">
    div#idleft {
        position: absolute;
        width:  25%;
        height: 100%;
    }
    div#idright {
        position: absolute;
        right: 0px;
        width: 25%;
        height: 100%;
    }
    </style>
    <body>
    <div id="wrapper">
    <div id="idleft"><iframe id="left" iframe name="left" src="home.html?inframe" height="95%" width="100%" 
    
    frameborder="1" scrolling="auto"></iframe></div>
    <div id="idright"><iframe id="right" iframe name="right" src="sitemap.html?inframe" height="95%" width="100%" 
    
    frameborder="1" scrolling="auto"></iframe></div>
    </div>
    
    <script type="text/javascript">
    var qs = location.search;
    if ( qs.length > 1 )
    {
      var pairs = qs.substring(1).split("&");
      for ( var p = 0; p < pairs.length; ++p )
     {
      var pair = pairs[p].split("=");
      if ( pair[0] == "left" || pair[0] == "right" )
     {
        var iframe = document.getElementById(pair[0]);
        var temp = decodeURIComponent( pair[1] ).split("#");
        iframe.src = temp[0] + "?inframe" + (temp.length > 1 ? "#" + temp[1] : "");
        }
      }
    }
    </script>
    </body>
    FILE: sitemap.html
    Code:
    <html>
    <head>
    <script type="text/javascript">
    if ( this == top && location.search.substring(0,8) == "?inframe" )
    {
        location.href = "index.html?right=sitemap.htm?inframe";
    }
    </script>
    </head>
    <body>
    <h2>This is the page sitemap.htm</h2>
    <hr/>
    <a href="sitemap.html" target="_blank">Open This Frame in a New Window</a>
    <hr/>
    <a href="tr.html?inframe">Replace this frame with <b>tr.htm</b></a>
    </body>
    </html>
    FILE tr.html
    Code:
    <html>
    <head>
    <script type="text/javascript">
    alert( "Is this top? " + (this == top) + "\nlocation.search is " + location.search );
    if ( this == top && location.search.substring(0,8) == "?inframe" )
    {
        location.href = "index.html?right=tr.html?inframe";
    }
    </script>
    </head>
    <body>
    <h2>This is the page tr.html</h2>
    <hr/>
    <a href="tr.html" target="_blank">Open This Frame in a New Window</a>
    <hr/>
    <h2>This is the page tr.htm</h2>
    </body>
    </html>
    They work. I still think it's a bit of overkill. But they work.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks, Old Pedant, for the ideas about possibilities, but my response from yesterday afternoon feels like the right plan:
    how complex? Just the level it's at now. Your quick-and-easy script provides the functionality I wanted... and now I can return to complex questions about education.
    Your scripts -- both the original (described by me in Post #1) and the new supplements (explained by you in #5 and #7) -- work well, are extremely useful, and are greatly appreciated.
    Craig


  •  

    Posting Permissions

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