PDA

View Full Version : Call the Iframe from external page?



psilos
04-13-2007, 07:59 AM
1) Script Title: Iframe SSI script II

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

3) Describe problem:

Hello everyone,

I have implemented the iframe effect with your script in page "products.html" for example.So i load in this page iframes "products01.html", "products02.html", ..etc

What i want to achieve is to load the specific "product02.html"from my index.html page where i have a general menu.
How can i achieve this??:confused:

Normally i would call :
<a href="javascript:loadintoIframe('myframe', 'products/product02.html')">

Thanx in advance..

mburt
04-13-2007, 01:32 PM
Put this in the <head> section of your page:

<script type="text/javascript">
window.onload = function() {
loadintoIframe('myframe', 'products/product02.html');
}
</script>

psilos
04-13-2007, 02:05 PM
Well i don't want to load always the same page...
;)
i have a menu, so i want to pass as parameter to the javascript the specific page each time..

Hope u understand what i mean..

mburt
04-13-2007, 02:08 PM
I'm not sure I fully understand what you mean, but I'll give it a shot:

function loadpg(frame, location) {
loadintoIframe(frame,location);
}
And use it with the script above. But this honestly, has no point considering you could use the default loadintoIframe(); function.

Veronica
04-13-2007, 02:27 PM
Are you trying to put links on your home page that would link to an iframe page but with different content loaded into the iframe page depending on the link?

You can do that with javascript, but I'm not sure it will work with the resizing script.

The easiest way (unless you have thousands of product01.html, product02.htmls etc) would be to simply create different pages, using the same script but with different content loaded into the iframe, and then set up links to those pages.

psilos
04-13-2007, 02:29 PM
I'll try to explain..

I have an index.html as first page. In this i have a drop-down menu in order to select products.

Then i have a products.html page.
In this i have an iframe with id="myframe".
In the iframe i load the pages product01.html, product02.html, ...etc.

What i want to achieve is :
Select from index page a product
Load products.html
And load inside products.html in the iframe the product selected


Thanx for your help..

psilos
04-13-2007, 02:37 PM
Are you trying to put links on your home page that would link to an iframe page but with different content loaded into the iframe page depending on the link?

That's exactly what i mean Veronica..

But i don't agree with your solution..
I use iframes in order not to have loading different pages each time..but refresh only a part of it..
So, if i make direct links to pages i earn nothing..

Veronica
04-13-2007, 02:47 PM
OK, try this.

In products.html, add this to the head section NOTE-replace myframe with the id you have given the frame, but keep it in quotes:


<script type="text/javascript">
<!--

function loadIframe(){
if (location.search.length > 0){
url = unescape(location.search.substring(1))

window.frames["myframe"].location=url
}
}

onload=loadIframe
//-->
</script>


Then on your home page, write the links like this


<a href="products.html?product01.html">Product 1</a>


This may cause problems with the resizing script in some browsers.

jscheuer1
04-13-2007, 02:58 PM
First of all, I am not all that thrilled with the Iframe SSI script II script because it doesn't work in many browsers and cannot work even in IE and FF in certain layouts. And, in any browser without javascript enabled, shows no iframe. But, if you are happy with it, you can pass a parameter as a query with an ordinary link:


<a href="index.html?product=02">Link Text or Image</a>

Then, add this function at the top of the script:


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;
}

Add this code to function resizeCaller() of the script:


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"
}
}
if(get('product'))
loadintoIframe('myframe', 'products/product'+get('product')+'.html')
}

Or, instead of modifying resizeCaller(), you could replace this (your version of it):


<iframe id="myframe" src="externalpage.htm" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>

with something like this:


<script type="text/javascript">
var the_product_page=get('product')? "products/product'+get('product')+"html" : "products.html";
document.write('<iframe id="myframe" src="'+the_product_page+'" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>');
</script>

This would load the chosen content as the page loads as opposed to after the page has loaded.

Veronica
04-13-2007, 03:26 PM
I agree with John about the re-sizing script's "buggy-ness"
You should also make sure that your products.html page has noframe content that brings in an iframe with good old-fashioned set heights and widths, and calls in a gateway page with links to ALL your product pages. It may not look pretty, but if you're using this to make money, it's better than having potential customers seeing a blank page if they have javascript turned off.

psilos
04-14-2007, 10:13 AM
Okie guys, thank u both for your help and guidance. I'll try them on Monday when i return at office..

I don't have specific problems with the target audience, a 90-95% is using Windows with IE6 with default browsing(Javascript enabled). And about 5%FF.
The only problemm is in firefox where it puts an extra padding inside iframe, but i would compromise..

Are there any better techniques or scripts i could use for the same result?
Or should i at last turn to Ajax? I like the ability to resize in depend with content..

Thanx for any advice.

jscheuer1
04-14-2007, 12:07 PM
The only problemm is in firefox where it puts an extra padding inside iframe, but i would compromise..

Thanx for any advice.

That can be worked with sometimes by adjusting this variable in the script's configuration:


var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

Also, depending upon your layout and any other design considerations you might have that could be affected by this, you could try using:


<style type="text/css">
body {
margin:0;
padding:0;
}
</style>

on each page that gets loaded into the iframe.