The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

Reply to this topicStart new topic
> iFrame assistance pls. help, How to link to iFrames.
post Aug 14 2010, 10:52 PM
Post #1

Group: Members
Posts: 1
Joined: 14-August 10
Member No.: 12,504

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


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

i can't get this working properly! blink.gif mad.gif huh.gif wacko.gif

pls assist me with this.

This is the code i use:

The java script:

* IFrame SSI script II- Dynamic Drive DHTML code library (
* Visit 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])"block"

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){"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, 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 ::
Created by: James Nisbet (morBandit) :: */

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="iframebackstartdefault.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="text30" 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">
<div><font class="ws8"><B>Whatever!</a></B></font></div>

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 find the code to do this.

Can anybody help me out pls?



This post has been edited by warfish70: Aug 14 2010, 11:31 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Aug 14 2010, 11:38 PM
Post #2

WDG Member

Group: Root Admin
Posts: 8,270
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3

I'm moving this to the client-side scripting forum.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Aug 14 2010, 11:39 PM
Post #3

WDG Member

Group: Root Admin
Posts: 8,270
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3

Please see the FAQ entry

It talks about regular frames, but based on your description, you have the same problem with inline frames.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:


- Lo-Fi Version Time is now: 25th May 2018 - 01:42 PM