PDA

View Full Version : 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/dynamicindex17/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/showpost.php?p=49382&postcount=10

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


<!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:


<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
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.


<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

<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

<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:


<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.

mburt
08-21-2006, 02:46 PM
You can't target "ID" with links, it the property needs to be "name"

kovalnizle
08-21-2006, 03:08 PM
Thanks jscheuer1 your the best got everything to work.:) :) :) :)

jscheuer1
08-22-2006, 02:43 AM
You can't target "ID" with links, it the property needs to be "name"

Actually, you can in javascript with an iframe but, in that case you need to change the iframe's src attribute, not its location.href property/object. This can come in handy sometimes, as it is the only type of javascript frame/iframe cross domain interaction that will not cause a security error.

cosava
11-30-2006, 09:53 PM
I have a php page that should be included in 'framepage' for example:

index2.html?framepage=db/index.php?id=1&action=more_details

How could the above work properly?

Please advice!
If anybody has any idea please send me an e-mail to cs@intergate.gr

Thank you all.
Constantine

jscheuer1
12-01-2006, 04:30 AM
I'm not certain about the use of the slash in the query string:



index2.html?framepage=db/index.php?id=1&action=more_details

It may need to be escaped, probably not in this case. However, the query string may be quite long in most browsers. The ampersand is used to separate the various values being passed:


index2.html?framepage=db/index.php&id=1&action=more_details

Also, for validation purposes, the ampersand may need to be represented as the named entity:


&amp;

in your HTML code, so that it is not confused in some browsers as initiating some other named entity sequence.

cosava
12-01-2006, 09:29 AM
Everything works perfect until the second question mark. The following works ok:
http://www.mydomain.com/index.html?framepage=http://www.mydomain.com/dben/index.php

I need that second question mark in order to input the varables into the php code. Is there any way to correct the "framepage" code so it could accept a complete path inside quotes after the first question mark no mutter what the path is?
for example:

http://www.mydomain.com/index.html?framepage="http://www.mydomain.com/dben/index.php?id=1&action=more_details"

thank you
Constantine

jscheuer1
12-01-2006, 04:12 PM
I need that second question mark in order to input the varables into the php code.

Really? Have you tried it as I suggested:


index2.html?framepage=db/index.php&id=1&action=more_details

The meaning of the ampersand in a query string is literally 'and'. It should work just fine. If, for some odd reason, php is expecting its parameters to be first in the query, you could do this:


index2.html?id=1&action=more_details&framepage=db/index.php

If the php cannot function with additional parameters (separated with the & character) in the query string other than just those that it is expecting, the php is flawed.

If your 'second' query string is being appended to the URL automatically, a different method of introducing the:

framepage=db/index.php

component to it must be found. That shouldn't be too hard but, folks in the php forum would probably be better able to help you with doing that. If I could see your pages in action, I might be able to figure it out as well.

Notes: In almost all cases, you can only have one query string (and therefore only one ? character) attached to a given URL. The query string begins with a ? character and its additional (if any) components are preceded with the & character.

cosava
12-02-2006, 09:02 AM
Dear jscheuer1 (Mad Professor),

Thank you very much for your replies. I have tried everything you suggested and it didn't work. Inside the iframe opens the index.php without the parameters even in the case of puting the parameters first. Anyway, I realized that you are right with the two queries. The whole string containes the first query from the "framepage" and after that the second query from index.php. Is it possible to make a query for index.php like "dben/index.php?id=1&action=more_details" and the result to put it in another page's iframe target or I am searching for miracles?

Thank you anyway for your efford to help me.
Constantine

jscheuer1
12-02-2006, 11:51 AM
I misunderstood what you were trying to do. You are trying to pass in the single parameter 'framepage', another URL complete with its own query string. This is what I would try:


index2.html?framepage=db%2Findex.php%3Fid%3D1%26action%3Dmore_details

If you have no luck with that, try the php forum. Be sure to explain to them that the parameter you are trying to pass in the query string is itself a URL with its own query string.

cosava
12-02-2006, 04:43 PM
YOU ARE A REAL MAD PROFESSOR!!!! :)

It works perfectly now!!! Thank you very much. I really don't know what to do to thank you!

I am much obligeed! :D

adaman797
12-30-2006, 11:58 AM
I'm using this link:


<a href="albums/index.html?framepage=http://www.adamlong.com/cgi-bin/emAlbum.pl&#63;cmd&#61;show_thumbs&amp;path&#61;japan%20photos/12-29-06&amp;tn&#61;1>

photos

</a>

and I have all the code on the other page with the frame, but for some reason it is only loading "http://www.adamlong.com/cgi-bin/emAlbum.pl"

I think that has to do with the multiple question marks, but I don't use PHP so the above example doesn't fix the problem.

Thanks in advance for any help you have!

jscheuer1
12-30-2006, 03:58 PM
You missed the closing quote on the href but, that's probably not the only problem. It looks like you are attempting to pass a URI that includes it own query string as was the other person in this thread. That problem was fixed by encoding. For you it would look like so:


<a href="albums/index.html?framepage=http%3A%2F%2Fwww.adamlong.com%2Fcgi-bin%2FemAlbum.pl%3Fcmd%3Dshow_thumbs%26path%3Djapan%20photos%2F12-29-06%26tn%3D1">photos</a>

Hopefully that will take care of it for you as well.

adaman797
12-30-2006, 04:05 PM
Wow... you are amazing. Sorry for the trouble about a problem that I should have fixed myself... and I always feel bad joining a forum just for one question like this! Hopefully you will see me back here sometimes! Thanks so much for your time.

Mtwo
12-18-2007, 08:10 PM
Hello,

I was wondering if there was a way of removing part of the url out of the link and placing it within this script? In our menu, we have links to our iframe page which has the above script attached for sending links to the iframe. <a href="/store.html?framepage=http://www.externaldomain.com/storesite/Search/Category/index.co?search_string=&amp;search|class=F" class="trigger">Networking</a>

We are looking to shorten this url, as well as remove the http://wwwexternaldomain.com part for our links.

So, how do I modify the loadframe function to account for the external domain in all urls sent to it?

http://www.mydomain.com/store.html?framepage=/storesite/Search/Category/index.co?search|class=F&search|cat=FF
vs
http://www.mydomain.com/store.html?framepage=http://www.externaldomain.com/storesite/Search/Category/index.co?search|class=F&search|cat=FF

Your help is appreciated...

tmate
06-14-2011, 01:30 PM
It took me a bit to put it all together, but this discussion helped me solve a problem - I needed to create a link that would go from my PROGRAMS page to the ARTICLES page and open an article other than the default article in an iframe.

these problems are hard to even describe!
but... thanks to JScheuer and others, answers are here.
thank you
Teri:o

Avenger
01-29-2013, 09:48 PM
John, thank you so much for providing this code. It was exactly what I needed for a problem I had trouble describing to Google. But once I found your post and implemented this solution, it solved the issue and truly made my day!

molendijk
01-29-2013, 11:38 PM
John, is your script doing the same thing as this (http://mesdomaines.nu/eendracht/include_menu_web_templates6j/index.html?page1.html) (= a script I wrote a while ago)? In that case, I wonder if your script produces flicker on page transition (Google Chrome, Opera) when we put a big image on the pages. I chose to put my script (<script> if(self.location.search.substr(1)!=''){frames.ifr.location.href = self.location.search.substr(1)} else {frames.ifr.location.href = 'page1.html'} </script>) just before the closing body tag (instead of doing onload) to avoid the flicker.

jscheuer1
01-31-2013, 03:15 AM
Hi Arie,

Honestly it's been so long I forget what the script did, let alone what it does now. I was only trying to answer the question. I don't think anyone said anything about flicker until now. You're welcome to try it out.

molendijk
01-31-2013, 10:06 AM
John, your script and mine seem to do the same thing. I'll try out the flicker thing. Thanks.