www.webdeveloper.com
Results 1 to 8 of 8

Thread: Direct links that open pages within an iframe

Hybrid View

  1. #1
    Join Date
    Aug 2010
    Posts
    5

    Direct links that open pages within an iframe

    I have developed an intranet local site that consists of a home page: index.html which contains an iframe.

    Above the iframe, I have a navigation bar that opens pages with target:iframe inside the iframe.

    iframe's src is set to a page named home.html and this is the page displayed when you visit the site.

    I would like to be able to give users links that point directly to certain pages that populate within the iframe and not instructions on how to get to them via the nav bar. And I am not talking about the pages alone but the parent piece where the navigation bar is (nav and iframe are contained in the index.html)

    Except obviously the home.html, I am unable to do that. I have found a few Javascripts but I was not clear if they were supposed to help me achieve what I wanted and they haven't worked. Any ideas??


  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    index.html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    
    <script type="text/javascript">
    window.onload=function() {
    var data=location.search;
    if(data) {
        data=location.search.substring(1); // remove the '?'
        frames[0].location = data;
        }
    };
    </script>
    
    </head>
    <body>
    <h1>index</h1>
    <iframe src="default.html"></iframe>
    </body>
    </html>
    home.html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    
    <script type="text/javascript">
    if (top == self) {
        location.href = 'index.html?' + self.location.href;
        }
    </script>
    
    </head>
    <body>
    <h1>home</h1>
    </body>
    </html>

  3. #3
    Join Date
    Aug 2010
    Posts
    5

    Thumbs up It works...but a couple things

    Fang, thanks a lot, it works.

    I hardly have any experience with Javascript.

    Here is how I am able to point directly to a page inside the iframe:

    I either use: http://sitename.com/index.html?pageA.html
    or
    http://sitename.com/?pageA.html

    I am unable to do it in any other way.

    Is the line below supposed to remove the (?) from the address, so I can use the direct page name alone?

    data=location.search.substring(1); // remove the '?'


    I also noticed that regardless the URL, the page defaults to the home.html (the src of the iframe in index.html) and within a second refreshes and the desired page appears. Is this how it supposed to work?

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    All documents, except index.html, must have the script used in home.html
    This script forces the document to open in the iframe.
    You only have to use a simple link
    Code:
    <a href="apage.html">apage</a>
    apage.html will open in the iframe

  5. #5
    Join Date
    Aug 2010
    Posts
    5

    Red face Correct

    You are right. It works as it should. Stupid me, I used the script in the index.html in the other pages instead of the one in home.html

    Problem solved. Thanks a million!

  6. #6
    Join Date
    Aug 2010
    Posts
    5

    Another problem

    The link works, however....
    When I try to get to a page using the toolbar (that opens pages inside the iframe with target=iframe), the page opens the parent page index.html that contains the toolbar and the page I ask for :

    .....................................
    banner
    --------------------------
    Toolbar
    :::::::::::::::::::::::::::::::
    banner :
    ..................................... |
    Toolbar :
    ::::::::::::::::::::::::::::::: | iframe
    :
    page.html |
    :
    .....................................

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    What is that the layout of? Not index.html then.

  8. #8
    Join Date
    Aug 2010
    Posts
    5

    index.html is my landing page

    My landing page is index.html. It contains an iframe. That iframe is set to src=home.html. To change page, you use the toolbar right above the iframe. Above the toolbar, there is a header div that only contains a flash banner

    So, it is like this:

    Banner
    Toolbar
    Iframe

    These three above make the index.html

    All the other pages that I build do not contain the toolbar or the banner. One of them is that initial 'home.html' which is what you see when you visit the site as index.html (or nothing, as index.html is the primary default document on IIS)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles