Open different iframe from another page with a link

**kovalnizle** · 08-18-2006, 05:18 PM

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

**boogyman** · 08-18-2006, 05:26 PM

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

**kovalnizle** · 08-18-2006, 05:44 PM

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.

**kovalnizle** · 08-19-2006, 10:10 PM

Can anyone tell me if this is even possible?

**jscheuer1** · 08-20-2006, 08:12 AM

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?

**jscheuer1** · 08-20-2006, 08:58 AM

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.

**kovalnizle** · 08-20-2006, 04:17 PM

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

**jscheuer1** · 08-20-2006, 05:08 PM

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.

**kovalnizle** · 08-21-2006, 12:07 AM

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.

**jscheuer1** · 08-21-2006, 06:18 AM

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.

Thread: Open different iframe from another page with a link

Thread Tools

Search Thread

Open different iframe from another page with a link

Bookmarks

Bookmarks

Posting Permissions