Advanced Search

Page 1 of 3 123 LastLast
Results 1 to 10 of 29

Thread: Open different iframe from another page with a link

  1. #1
    Join Date
    Aug 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Open different iframe from another page with a link

    1) Script Title: Iframe SSI script II

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...iframessi2.htm

    3) Describe problem:
    How would I go about opening a different page.
    Page one has an iframe and i know how to load a different page into the frame with a link, But how can i change the iframe from a different page.
    EX
    1. page1 has Iframe with a default (frame 1) load page.
    2. page 2 has a link to page 1 but needs another frame to load on page 1

    how can i make a link that loads page1 with another page in the frame.

    If you dont understand what i am saying i will give a better example on my website.
    Thanks in Advance

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    from what i gather... you are trying to reload page 1 from your page2 that is in the iframe? is that right? or are you saying that you want a second frame for the page 2 link to display the page 1?... either way.... i think that a url would be helpful

  3. #3
    Join Date
    Aug 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Some of the text is in a different language, dont mind that.
    This is the page with the iframe.
    http://www.aaautodealer.com/cars.html

    This is the page that has a link back to the page listed above. But i want this link to load that page with a different frame
    http://www.aaautodealer.com/cars/lot/164

    <a href="../../cars.html">Back to List</a> and javascript:loadintoIframe('myframe', 'bikes/list/bikes.html')
    how do i put these two codes together for that.

  4. #4
    Join Date
    Aug 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Can anyone tell me if this is even possible?

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,130 Times in 3,096 Posts
    Blog Entries
    12

    Default

    Yeah, it is possible. I'll try and throw together a demo for you. Just to get things straight though, I take it from the example pages that you linked to that you want all this to transpire in a single browser window, right?
    - John
    ________________________

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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,130 Times in 3,096 Posts
    Blog Entries
    12

    Default

    OK, try this out (some code borrowed from DimX) here:

    http://www.dynamicdrive.com/forums/s...2&postcount=10

    Make up a page with an iframe on it that has the name 'daFrame' and this script, kind of like so:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    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>
    </head>
    <body>
    <iframe name="daFrame" src="black.htm" width="400" height="400" scrolling="no" frameborder="1"></iframe><br>
    <a href="another.htm">another page</a>
    </body>
    </html>
    Now all you need to do to load a different page into the iframe when linking to the above page or similar type page is make a link like so:

    Code:
    <a href="iframe_load.htm?framepage=img_h.htm">Home with a twist</a>
    Notice the query string portion of the href (red), which contains the name of the page you want loaded into the iframe. Also, if you have other scripts on the page that have onload events, it won't matter for the most part but, for best results, put this script after these are declared and don't declare any onload events in the body tag. Just a fine point this last bit, it will work in most modern browsers wherever you put it.
    - John
    ________________________

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

  7. #7
    Join Date
    Aug 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes I got it to work thanks a lot but i cant do it for the
    1) Script Title: Iframe SSI script II

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...iframessi2.htm
    I need the frames to auto-resize

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,130 Times in 3,096 Posts
    Blog Entries
    12

    Default

    No problem here. I just put the new script after the iframe ssi II script on a page. I then gave its resizable iframe the name 'daFrame', and I was in business, worked fine in FF and IE.
    - John
    ________________________

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

  9. #9
    Join Date
    Aug 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1
    No problem here. I just put the new script after the iframe ssi II script on a page. I then gave its resizable iframe the name 'daFrame', and I was in business, worked fine in FF and IE.
    Code:
    <SCRIPT TYPE="text/javascript">
    
    /***********************************************
    * IFrame SSI script II-  Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
    * Visit DynamicDrive.com for hundreds of original DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    //Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
    //Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
    var iframeids=["daframe"]
    
    //Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
    var iframehide="yes"
    
    var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
    var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
    
    function resizeCaller() {
    var dyniframe=new Array()
    for (i=0; i<iframeids.length; i++){
    if (document.getElementById)
    resizeIframe(iframeids[i])
    //reveal iframe for lower end browsers? (see var above):
    if ((document.all || document.getElementById) && iframehide=="no"){
    var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
    tempobj.style.display="block"
    }
    }
    }
    
    function resizeIframe(frameid){
    var currentfr=document.getElementById(frameid)
    if (currentfr && !window.opera){
    currentfr.style.display="block"
    if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
    currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
    else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
    currentfr.height = currentfr.Document.body.scrollHeight;
    if (currentfr.addEventListener)
    currentfr.addEventListener("load", readjustIframe, false)
    else if (currentfr.attachEvent){
    currentfr.detachEvent("onload", readjustIframe) // Bug fix line
    currentfr.attachEvent("onload", readjustIframe)
    }
    }
    }
    
    function readjustIframe(loadevt) {
    var crossevt=(window.event)? event : loadevt
    var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
    if (iframeroot)
    resizeIframe(iframeroot.id);
    }
    
    function loadintoIframe(iframeid, url){
    if (document.getElementById)
    document.getElementById(iframeid).src=url
    }
    
    if (window.addEventListener)
    window.addEventListener("load", resizeCaller, false)
    else if (window.attachEvent)
    window.attachEvent("onload", resizeCaller)
    else
    window.onload=resizeCaller
    
    </SCRIPT>
    <script type="text/javascript">
    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>
    and this in the body
    Code:
    <iframe id="daframe" src="cars/list/cars-1.html" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>
    But when i link from another page like u said with
    Code:
    <a href="kars.html?framepage=cars/list/cars-5.html">Home with a twist</a>
    The default frame is the one showing not the one in the link.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,130 Times in 3,096 Posts
    Blog Entries
    12

    Default

    Name means name. Id means id. They are two different things, here is how my iframe on my demo page looks:

    Code:
    <iframe name="daFrame" id="myframe" src="medium_content.html" scrolling="no" marginwidth="0" marginheight="0" frameborder="1" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none">
    There could be other problems but, as long as you followed everything else as explained on the demo page for the Dynamic Drive script and in my posts for my script, you should be in business.
    - John
    ________________________

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

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
  •