Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Need to load certain page in an iframe on load.

  1. #1
    Join Date
    Nov 2005
    Posts
    40
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default Need to load certain page in an iframe on load.

    Ok, so I have a site that when a page loads (any page, it will automotically get the index page and then load itself in it, or at least tries. The problem is that instead of loading itself in it, it ends up loading the main original page in it.

    www.kadco-international.com
    www.kadco-international.com/company.html

    If you try the two above, you will see that when u go to the second link, it opens just like the home page instead of company.html.

    here is the code on each page that loads into index.html

    Code:
    		<script language="JavaScript" type="text/JavaScript">
    		function load_content () {
    			if (parent.document.getElementById('main_div')) {
    				parent.document.getElementById('main_div').innerHTML=document.getElementById('inner_frame').innerHTML;
    			}
    			if (!parent.document.getElementById('main_div')) {
    			window.location=('index.html') ;
    			}
    		}
    	</script>
    </head>
    <body  onload="load_content()">
    <div id="inner_frame">
    And here is the index page iframe code.

    Code:
    <iframe name="cont" width="1px" height="1px" src="iframe_0.html"  style="display:none"></iframe>
    <div style="padding:0px;" id="main_div"></div>
    I have tried several ways to do this, but everytime I try to load ANY page I end up loading ifram_0.html

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Well, I'm not sure what all your script does but, it cannot change what is on the index.html page. It could pass it a query string and code on the index page could change itself on the basis of this string, if present.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    I was in a rush when I first replied. Here is a more detailed explanation. Put this in the head of your index page, the one containing the iframe:

    Code:
    <script type="text/javascript">
    
    /*Load iframe from Query script
     *As first seen in http://www.dynamicdrive.com/forums
     *This notice must remain for legal use */
    
    function loadframe(){
    if(window.location.replace)
    window.frames.daFrame.location.replace(get('framepage'));
    else
    window.frames.daFrame.location.href=get('framepage');
    }
    function get(key_str) {
    var query = window.location.search.substr(1);
    var pairs = query.split("&");
    for(var i = 0; i < pairs.length; i++) {
    var pair = pairs[i].split("=");
    if(unescape(pair[0]) == key_str)
    return unescape(pair[1]);
    }
    return null;
    }
    if (location.search&&get('framepage')!=null)
    if ( typeof window.addEventListener != "undefined" )
        window.addEventListener( "load", loadframe, false );
    else if ( typeof window.attachEvent != "undefined" )
        window.attachEvent( "onload", loadframe );
    else {
        if ( window.onload != null ) {
            var oldOnload = window.onload;
            window.onload = function ( e ) {
                oldOnload( e );
                loadframe();
            };
        }
        else
            window.onload = loadframe;
    }
    </script>
    Notice the two red daFrame's. Substitute the name of your iframe for both of them.

    Use a script like so in the head of the page that you want contained in the iframe:

    Code:
    <script type="text/javascript">
    function load_content (page) {
    if (window.location==top.location)
    if (window.location.replace)
    top.location.replace(page+'?framepage='+top.location.href);
    else
    top.location.href=page+'?framepage='+top.location.href;
    }
    </script>
    And, in its body tag:

    HTML Code:
    <body onload="load_content('index.html');">
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Nov 2005
    Posts
    40
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    THanks for the help, but for some reason, your code simply made the pages unaccessable.

    the iframe name is cont

    The problem I originally have is if I come from an outside source, all I can load is the home page. Once I am on the site, I can access any page that I like.

    My code is to tell the browser that if someone trys to access a frame, then it should load the whole site, not just the page.

    What I want to do is say someone types in the url from a single page or is directed via email or another website or whatever, then the source of the iframe on index.html will be replaced with the desired destination.

    the home page is called iframe_0.html so when someone types in www.kadco-international.com they go to www.kadco-international.com/iframe_0.html
    but the problem is that if they type in say www.kadco-international.com/company.html then they are returned to iframe_0.html
    and I want to fix that.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    The script on index.html is working. If you paste:

    Code:
    http://www.kadco-international.com/index.html?framepage=company.html
    into the browser, it will load company.html into the iframe. However, you haven't completed the coding I recommended in my post in the second two areas:

    Use a script like so in the head of the page that you want contained in the iframe:

    Code:
    <script type="text/javascript">
    function load_content (page) {
    if (window.location==top.location)
    if (window.location.replace)
    top.location.replace(page+'?framepage='+top.location.href);
    else
    top.location.href=page+'?framepage='+top.location.href;
    }
    </script>
    And, in its body tag:

    HTML Code:
    <body onload="load_content('index.html');">
    That code belongs on company.html (and all pages that you want to be 'self en-framing') and I do not see it in that page's source, instead, I see this (what you had before):

    Code:
    		<script language="JavaScript" type="text/JavaScript">
    		function load_content () {
    			if (parent.document.getElementById('main_div')) {
    				parent.document.getElementById('main_div').innerHTML=document.getElementById('inner_frame').innerHTML;
    			}
    			if (!parent.document.getElementById('main_div')) {
    			window.location=('index.html') ;
    			}
    		}
    	</script>
    </head>
    <body  onload="load_content()">
    If you use the code as instructed it will switch to index.html with the proper query string for each content page. Example query sting:

    Code:
    ?framepage=company.html
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Apr 2008
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    alright guys... I have the same problem as this guy above. I tried following this post to fix it, and it hasn't worked yet. I'm trying to link to pages individually without being routed back to the index.html. We will use the iframe_3.html for example. http://www.smedleyinsurancegroup.com/iframe_3.html will route you to index.html. I've pasted the code above into the index an iframe_3, however i feel I might have copied something incorrectly or place it in the wrong spot. Please advise!

    Thanks so much!

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    The script appears to be working just fine. The problem arises because you are not seeing what is in the iframe (from index.html):

    Code:
    <iframe name="cont" width="1px" height="1px" src="iframe_0.html"  style="display:none" ></iframe>
    It's display property is set to none.

    What you are seeing is the content from iframe_0.html's inner_frame division that was put into the index.html's main_div division by this script on iframe_0.html:

    Code:
    function load_content () {
    	if (parent.document.getElementById('main_div')) {
    		parent.document.getElementById('main_div').innerHTML=document.getElementById('inner_frame').innerHTML;
    	}
    	if (!parent.document.getElementById('main_div')) {
    	window.location=('index.html') ;
    	}
    }
    If you want iframe_3.html to do a similar thing, it must have similar code and a similar origin division on it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    jsmedley (04-05-2008)

  9. #8
    Join Date
    Apr 2008
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    So how do I fix it?

  10. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    I thought I just told you. However, to repeat:

    If you want iframe_3.html to do a similar thing, it must have similar code and a similar origin division on it.
    This means that where you have:

    Code:
    <script language="JavaScript" type="text/JavaScript">
    		function load_content () {
    			if (parent.document.getElementById('main_div')) {
    				parent.document.getElementById('main_div').innerHTML=document.getElementById('inner_frame').innerHTML;
    			}
    			if (!parent.document.getElementById('main_div')) {
    			window.location=('index.html') ;
    			}
    		}
    	</script>
    and:

    HTML Code:
    <body   onload="load_content()" >
    <div id="inner_frame">
    
    ....... content of the page is here .......
    
    				</div>
    </body> 
    </html>
    on iframe_0.html, you need to do the same thing on iframe_3.html and on any other page that you want to load its content into the parent's 'main_div' division.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. The Following User Says Thank You to jscheuer1 For This Useful Post:

    jsmedley (04-05-2008)

  12. #10
    Join Date
    Apr 2008
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much! More than helpful! I got it all squared away and the whole site should be mostly done by the end of the weekend.
    Thanks again!

    Jesse Smedley | Insurance Broker
    Smedley Insurance Group
    Health | Life | Annuity | Disability | Mortgage Protection
    Office: (866) 260-9829
    Local: (602) 412-3126
    Fax: (602) 412-3473
    Jesse@SmedleyInsuranceGroup.com
    Affordable Health Insurance

    A referral from you would mean the world to me.
    While business is good and we are growing rapidly, I am never too busy to help serve your friends, family, neighbors and business associates protect their assets and maximize their earnings!

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
  •