View Full Version : Linking to iframes with different src on separate page

08-17-2010, 12:23 AM
1) Script Title:

2) Script URL (on DD): ??

3) Describe problem:

Hi folks. I'm kinda new to HTML/ Javascript programming and I have a bit of a problem.

I have a site with multiple sections. Each section uses an iframe.
Every section has an src=iframesectionstart. Every topic replaces the src=iframesectionstart through a javaloadscript; this works like clockwork. :)


I also have an index page with no iframes. From that index page i want to link to different sections (parent pages) AND link to the proper iframe as well. (replace the src=iframesectionstart)

i can't get this working properly! :confused::(:o

can you pls. assist me with this.

This is the code i use:

The java script:

<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=["iFrame1"]

//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)
//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])

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
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, true)
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)

function loadintoIframe(iframeid, url){
if (document.getElementById)

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: James Nisbet (morBandit) :: http://www.bandit.co.nz/ */

window.onload = function() {
document.onselectstart = function() {return false;} // ie
document.onmousedown = function() {return false;} // mozilla

/* You can attach the events to any element. In the following example
I'll disable selecting text in an element with the id 'content'. */

window.onload = function() {
var element = document.getElementById('content');
element.onselectstart = function () { return false; } // ie
element.onmousedown = function () { return false; } // mozilla

The placing of the iframe in the <body> of the different sections (html pages)

<iframe id="iFrame1" src="iframesectionstartdefault.html" width="800px" height="400px" style="position:absolute; left:200px; top:100px; z-index:73 scrolling="yes" marginwidth="0" marginheight="0" frameborder="0"></iframe>

and in the <body> load the appropriate html page into iframe1

<div id="text10" style="position:absolute; overflow:hidden; left:159px; top:676px; width:185px; height:17px; z-index:54">
<a href="java script:loadintoIframe('iFrame1', 'iframebackwhatever.html')" title="whatever" class="style1"><div class="wpmd">

Now my question is:

How do i link directly from the index.html to the section.html with the whatever.hml loaded into iframe1? I can't figure out the code to do this.
is it possible without a body onload command? I don't want to pop up multiple pages.....
do i have to add addLoadEvents() in the java scripts?

Can someone pls help me out?