Linking to iframes and change content [Archive]

warfish70

08-20-2010, 01:41 PM

Hi all

I'm rather new to java scripting and trying to get this done for over a week now.

I'm building a complete new site (not online yet) which is done for 99,9%

The site consists of:

Index - No frames - Just an entrance of the site with links
main menu
Section1 - 1 iframe ("iframe1") - default src=iframe1defaultsection1content
main menu submenu section1
Section2 - 2 iframes ("iframe1","iframe2") - default src = iframe1defaultsection2content - frame2 contains images that change
main menu submenu section2
Section3 - 1 iframe ("iframe1") - default src=iframe1defaultsection3content
main menu submenu section3
Section4 - 1 iframe ("iframe1") - default src=iframe1defaultsection4content
main menu submenu section4
Contact - 1 iframe ("iframe1") - default src=iframe1defaultcontactcontent
main menu submenu contact

The main menu is plain html that is on every page
I use javascripts to make a loadIframeFunction load content into the iframes

<head>
<script type="text/javascript>
var iframeids=["iFrame1"]

var iframehide="yes"

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}
</script>
</head>
<body>

<iframe id="iframe1" src="iframesection1start.html" width="644px" height="385px" style="position:absolute; left:505px; top:275px; z-index:73 scrolling="yes" marginwidth="0" marginheight="0" frameborder="0"></iframe>

<a href="javascript:loadintoIframe('iframe1', 'iframecontent.html')" title="content">Content</a>

</body>

Everything works, but 1 thing.

i can't get the links in the index page link to the specific section page AND change the default src content

can anybody assist me pls?

warfish70

08-20-2010, 04:08 PM

Thanks to MRJ i found the solution for my problem.

i combined his code with the one i already had.

My javascript on the section pages looks like this:

//Input the IDs of the IFRAMES you wish
//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"

function loadIframe(){
if (location.search.length > 0){
url = unescape(location.search.substring(1))

window.frames["iframe1"].location=url
}
}

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

onload=loadIframe, loadintoIframe

My section pages look like this: - You MUST leave the src property empty! and keep in mind that javascript is case sensitive!

<body>
<iframe name="iframe1"id="iframe1" src="" width="644px" height="385px" style="position:absolute; left:505px; top:275px; z-index:73 scrolling="yes" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</body>

now i can call the right content in the right page from the links on the index page

<a href="sectionx.html?iframecontenty.html">content y</a>

and use the java loadintoIframe script via the submenus

<a href="javascript:loadintoIframe('iframe1', 'iframecontentz.html')"> content z</a>

The last thing i had to do was to alter the code in the html main menu to load the default section page - this is easy!

<a href="sectionx.html?iframesectionxstart.html">section x</a>

Hope this can help others too that have problems with inline frames :D:D