简体   繁体   中英

Changing text dynamically on a framed page

替代文字

Hello guys

I'm creating a little website for my Javascript course. I created a page with 3 frames as above in the image.

I don't know if it is possible to do that but what I want to do is:

When the visitor clicks on "PAGE A" from the FRAME MENU, the text "TEXT TITLE" in the FRAME HEADER is changed to "WELCOME TO A", or when he clicks "PAGE B", the text "TEXT TITLE" is changed to "WELCOME TO B".

I know it's possible to load two pages by one click and therefore you could say why not load another page in the frame header, but it's not what I want to do.

Is it possible to do that by any means in javascript?

Thanks

Well, first suggestion - don't use frames. It is very easy to include pages into each other, so just write little components like menu.html, top.html, mainpage.html and include those into your pages.

This makes page management much easier - you reuse the code and can make the pages from those little components.

Then when you click on the link you would just go to the page that has manu included, in the top you include the appropriate title and the main page.

If you use some server-side language you could pass the title of the header as a parameter.

If you really want to go with frames you would need to do something like this: Main page with frames:

<html>
<head>
<title>Frames Example 5</title>
</head>
<frameset cols="20%,80%">
<frame src="page1.htm" name="left_frame">
<frame src="page2.htm" name="right_frame">
</frameset>
</html> 

Page, that changes links:

<html>
<head>
<title>frame 10</title>
<script language="JavaScript" type="text/javascript">
<!--
function change()
{
parent.left_frame.location="page3.htm";
parent.right_frame.location="page4.htm";
}
//-->
</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<center>
Click the link below to change both frames.
<br />
<a href="javascript:change2()">change 2 frames</a>
</center>
</body>
</html> 

so, in your menu add this javascript and change the links and reference your frames.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM