Iframe SSI script II - jumping to a specific location within the target html

**Susith** · 08-01-2012, 02:41 PM

1) Script Title: Iframe SSI script II

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

3) Describe problem: I'm using the above script to display other html pages within an iframe. I'm wondering whether I could use this script to jump to a named anchor location within the target html file.

I'm still developing the site so I couldn't give you a direct link to the site. Therefore I've pasted all the coding I'm using below (I stripped off most of the coding so that it would be easier for you to understand what I'm trying to do).

The following coding is my main page where I've got the hyperlink

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="siteassets/Management_E-ssentials_main.css" />


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

//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++){ 
var iframeid = iframeids; 
if (document.getElementById) 
resizeIframe(iframeid)


//reveal iframe for lower end browsers? (see var above): 
if ((document.all || document.getElementById) && iframehide=="no"){ 
var tempobj=document.all? document.all[iframeid] : document.getElementById(iframeid) 
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, hashtag){
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>

<title>test1</title>
</head>

<body>
<div class="mainframe">
<a href="javascript:loadintoIframe('Content_iframe', 'toolkit2.html', 'Coaching')">Coaching</a>
</div>

<iframe id="Content_iframe" src="home2.html" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" allowtransparency="true"></iframe>

</body>
</html>

Please be patient with me because I'm a newbie to javascript and this is my first time in the forum.

I was thinking of adding a third parameter to the hyperlink so that I can pass on the name of the anchor to the loadintoIframe function. <a href="javascript:loadintoIframe('Content_iframe', 'toolkit2.html', 'Coaching')">Coaching</a>. However because of my "newbieness"... I don't know how to use it within the javascript to make the loaded page (toolkit2.html) to then jump to that named anchor.

I would greatly appreciate if anyone can help me out.

Many thanks

Susith

**jscheuer1** · 08-01-2012, 05:39 PM

If you want to load the page to a named anchor, named anchors designated by the hash (#) are part of a standard URL, so that's the first thing I'd try:

Code:

<a href="javascript:loadintoIframe('Content_iframe', 'toolkit2.html#Coaching')">Coaching</a>

This assumes that toolkit2.html has a named anchor on it by the name of Coaching and that it's far enough down the page to make a difference. It should work and if it does, requires no other modifications to the script.

If there is a problem, first make sure you can:

Code:

<a href="javascript:loadintoIframe('Content_iframe', 'toolkit2.html')">Coaching</a>

and that works to at least load the page.

**Susith** · 08-02-2012, 09:03 AM

D'oh! Forgive me I must have been having a blond moment yesterday. When I was testing this out yesterday, I did first try it out the normal method but it didn't work.

Code:

<a href="javascript:loadintoIframe('Content_iframe', 'toolkit2.html#Coaching')">Coaching</a>

That's why I tried thinking of passing the anchor name seperately, googling for answers, posting this question on the forum, etc. However when I read your reply today, it made me think there must be something wrong with my original coding for it to not work. So I went back and re-did all the anchors and Voilà! it's all working like a charm!

Apologies again if I've wasted your time jscheuer1, but I'm glad that I did post the question because if it weren't for your reply, I wouldn't have thought to re-check my coding. A big lesson for me.... "Check and re-check your coding before you start asking questions".

Thank you very much and thanks Dynamic Drive for the script!

Susith

Thread: Iframe SSI script II - jumping to a specific location within the target html

Thread Tools

Search Thread

Iframe SSI script II - jumping to a specific location within the target html

Thank you!

Bookmarks

Bookmarks

Posting Permissions