Change the URL of a Frame Using Javascript

This demo shows you how to use Javascript to change to URL of a page that is viewed inside of a frame. This is a pretty simple demo.

Contributed by
Rating: 3 stars3 stars3 stars3 stars3 stars / 25
September 01, 1999
Rate this Article:
MEH MEH++


SEARCH ASP FREE
TOOLS YOU CAN USE

advertisement
The main context that you need to use is: parent.[frame name].location.href = 'pagename.htm'; You can use this in your scrips to change the contents of pages on any valid HTML/Javascript Event ie: onMouseOver, onMouseOut, onClick, etc.For this demo I will be using six pages with the following code:1. default.htm


<html>
<
head><title>Change the URL of a frame using Javascript</title></head>
<
frameset rows="20%,*">
<
frame name="topFrame" src="contents.htm"><!-- make sure that you remember the name assigned to the frame for use in your code later -->
<
frame name="baseFrame" src="body.htm">
</
frameset>
<
body>
</
body>
</
html>

2. contents.htm


<html>
<
head><title>Table Of Contents</title>
<
script>
function 
changePage(strPage)
{
parent.baseFrame.location.href strPage/*This line is the one that changes the baseFrame frame URL.  strPage can be substituded with a hardcoded string.*/
}
</script>
</head>
<body>
<a href="javascript:void(0);" onClick="changePage('page1.htm')">Page 1</a>   <!-- javascript:void(0) tells the browser not to actually change the page in the current browser, but you still want the words to appear as a hyperlink  -->
<a href="javascript:void(0);" onClick="changePage('page2.htm')">Page 2</a>   
<a href="javascript:void(0);" onClick="changePage('page3.htm')">Page 3</a>   
<a href="javascript:void(0);" onClick="changePage('body.htm')">Home</a>
</body>
</html>

3. body.htm


<html>
<
head><title>Main Body Page</title></head>
<
body>
This is the main body page that first appears.
</
body>
</
html>

4. page1.htm


<html>
<
head><title>Page 1</title></head>
<
body>
This is Page 1
</body>
</
html>

5. page2.htm


<html>
<
head><title>Page 2</title></head>
<
body>
And 
here is page 2
</body>
</
html>

6. page3.htm


<html>
<
head><title>Page 3</title></head>
<
body>
Content for Page 3 goes here.
</
body>
</
html>

blog comments powered by Disqus
ASP CODE ARTICLES

- ASP Forms
- ASP: The Beginning
- Getting Remote Files With ASP Continued
- Inbox and Outbox Manipulation in ASP
- Relational DropDownList Using VB.NET
- Ad Tracking URL Hits
- Use ViewState to display one record per page...
- Send Email using ASP.NET formatted in HTML
- ASP File Explorer
- ASP/XML Interview questions by Srivatsan Sri...
- Pressing RETURN won't submit the form
- This shows how you get the TEXT of a combo r...
- Group Data by Adrian Forbes
- Multiple checkbox select sample
- Multiple checkbox select with all values sam...

ASP Web Hosting ASP.Net Web Hosting Windows Web Hosting
 
 
 

ASP Free Forums 
 RSS  Tutorials RSS
 RSS  Forums RSS
 RSS  All Feeds
Site Map 
Request Media Kit
Write For Us Get Paid 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Privacy Policy 
Support 


© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 6 - Follow our Sitemap
Most Popular Topics
All ASP.Net Tutorials