Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ iFrame assistance pls. help

Posted by: warfish70 Aug 14 2010, 10:52 PM

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.

However.

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!

pls assist me with this.

This is the code i use:

The java script:

/***********************************************
* 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)
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, 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)
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

/* 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="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>
</div></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?

Greetzzz,

Warfish

Posted by: Darin McGrew Aug 14 2010, 11:38 PM

I'm moving this to the client-side scripting forum.

Posted by: Darin McGrew Aug 14 2010, 11:39 PM

Please see the FAQ entry
http://htmlhelp.com/faq/html/frames.html#frame-address

It talks about regular frames, but based on your description, you have the same problem with inline frames.