Forum Moderators: open
I have one major issue though. I have some links on my site that need to update the target iframe "mainframe" when clicked.
When the main page loads the function is called, the iframe resizes to the size of the src page thats called, and it looks great...
But a solution to one problem leads to another problem....
Now my hyperlinks no longer update the taget iframe, they open in a new browser window or not at all.
Any help getting my links to work with this code would be gratly appreciated.
Is there a way when clicking a hyperlink to reload the entire main page and call function again but have the new content included in my Iframe? Or is there a better way? See my examples below.
I am doing this in the page:
First I have the function:
<script>
function insertIt() {
var _y = document.getElementById('framediv');
var _x = window.frames[0].document.body.innerHTML;
_y.innerHTML = _x
}
</script>
Then I have this in my iframe object:
<div id="framediv">
<iframe name="mainframe" id="mainframe" onload="insertIt();" width="454" height="607" src="your_true_technology-mainframe.htm" target="_self" border="0" frameborder="0" marginwidth="5" scrolling="no">
Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>
</div>
My hyperlink looks like this:
<a style="font-family: Verdana; font-weight: bold" class="navtable" target="mainframe" href="contacts-mainframe.htm" >
Please help!
Thanks,
Joe
[edited by: tedster at 12:01 am (utc) on Jan. 23, 2005]
[edit reason] removed link [/edit]
[dynamicdrive.com...]
The guys at Dynamic Drive Rock! Great site any way here it goes from thier example. It worked out great for us!
First insert this under the <head> section of your site
<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=["myframe"]
//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=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, 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){
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>
Then create your Iframe.
<iframe id="myframe" src="your_true_technology-mainframe.htm" scrolling="no" marginwidth="5" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:454; display:none" target="_self">
Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>
Then edit your hyperlinks like so:
<a href="javascript:loadintoIframe('myframe', 'aboutus-mainframe.htm')">.
Thank god for google,
Joe
Can you explain why the first code didn't work, but the Dynamic Drive code does? It's not immediately obvious to me and I know you've probably become "very close" to the logic by now.
edited to correct spelling
[edited by: tedster at 5:36 pm (utc) on May 21, 2005]
The first code did not work for me because it would not allow the function to continue on another click.
I am not sure what made the biggest difference but it was probably how they setup the functions to clear and the hyperlink. I am pretty new to this Java script stuff. I wish I could answer your questions better. If I ever understand this better I will let you know!
Cheers,
Joe
