文章

使用frame框架，实现一个网页显示多个界面使用js语言，实现事件响应

本文介绍了一种利用HTML框架（frame）技术在一个网页内展示多个界面的方法。通过具体实例展示了如何划分界面区域、设置跳转链接及应用CSS样式等关键步骤。

发表于
作者 贾永琪
7 分钟阅读
使用frame框架，实现一个网页显示多个界面使用js语言，实现事件响应

文章信息

  • 原文链接：https://jiayq.blog.csdn.net/article/details/75324629
  • 发布时间：2017-07-18 19:32:39
  • 阅读量：1
  • 分类：java专栏收录该内容, 订阅专栏
  • 标签：#框架, #界面, #css, #html, #javascript

摘要

文章浏览阅读1.7k次。本文介绍了一种利用HTML框架（frame）技术在一个网页内展示多个界面的方法。通过具体实例展示了如何划分界面区域、设置跳转链接及应用CSS样式等关键步骤。

一个网页如何显示多个界面？

如何利用网页显示页面的资源？

如何让用户打开最少的页面，显示最多的信息？

本次项目是利用frame框架实现一个网页显示多个界面：

1.首先在index.jsp文件中注释掉<body>标签：

因为inde.jsp是第一个显示的界面，你也可以在需要开始使用框架的界面这样干！

添加如下代码:

1
2
3
4

 <frameset cols="1,4">
  	<frame src="mianht.html" name="left">
  	<frame src="main.html" name="right">
  </frameset>

其中，cols属性表示把整个页面分为1/5和4/5，

第一个scr属性表示左面1/5需要显示的界面，名字为left

第二个scr属性表示右面1/5需要显示的界面，名字为right
2.新建mianht.html和main.html文件

其中main.html只显示内容二字：

1
2
3

 <body>
   	内容
  </body>

mianht.html显示三个跳转标签：

1
2
3
4
5

<body>
   <a href="MyHtml.html" target="right">第一题</a><p>
   <a href="index.html" target="right">第二题</a><p>
   <a href="fun.html" target="right">第三题</a><p>
  </body>

效果如下：

image

3.新建MyHtml.html文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

<style type="text/css">
#table{
	width: 300px;
	height: 300px;
	border: 1px solid black;
}
#A{
	width: 100px;
	height: 200px;
	text-align: center;
	background-color: red;
	color: green;
	font-family: fantasy;
	font-size: 30px;
	border: 1px solid black;
}
#B{
	width: 200px;
	height: 100px;
	text-align: center;
	background-color: orange;
	color: blue;
	font-family: fantasy;
	font-size: 30px;
	border: 1px solid black;
}
#C{
	width: 100px;
	height: 100px;
	text-align: center;
	background-color: yellow;
	color: black;
	font-family: fantasy;
	font-size: 30px;
	border: 1px solid black;
}
#D{
	width: 100px;
	height: 200px;
	text-align: center;
	background-color: green;
	color: white;
	font-family: fantasy;
	font-size: 30px;
	border: 1px solid black;
}
#E{
	width: 200px;
	height: 100px;
	text-align: center;
	background-color: blue;
	color: white;
	font-family: fantasy;
	font-size: 30px;
	border: 1px solid black;
}
</style>
  </head>
  
  <body>
    <table id="table" align="center">
    	<tr>
    		<td id="A" rowspan="2">
    			<b>A</b>
    		</td>
    		<td id="B" colspan="2">
    			<b>B</b>
    		</td>
    	</tr>
    	<tr>
    		<td id="C">
    			<b>C</b>
    		</td>
    		<td id="D" rowspan="2">
    			<b>D</b>
    		</td>
    	</tr>
    	<tr>
    		<td id="E" colspan="2">
    			<b>E</b>
    		</td>
    	</tr>
    </table>
  </body>

这个界面显示如下界面：

image

4.新建index.html:

1
2
3
4

<FRAMESET cols="1,3">
  		<FRAME src="content.html" name="content">
  		<FRAME src="main.html" name="content1">
</FRAMESET>

再次使用到了框架， 把右面4/5页面再次分为整个页面的1/5和3/5

5.新建content.html:

css样式：

1
2
3
4
5

<STYLE>
  			A{
  				text-decoration: none;
  			}
</STYLE>

去掉下划线
HTML中：

1
2
3
4

<body>
  		<a href="file1.html" target="content1">文件1</a><p>
  		<a href="file2.html" target="right">文件2</a><p>
</body>

跳转链接
效果如下：

image

点击文件1：

image

点击文件2：

image

文件1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>file1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    file1
  </body>
</html>

文件2：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>file2.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
   file2
  </body>
</html>

6.实现第三题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<body>
	<form name="form1" onsubmit="foo();">
		<table align="center">
			<tr>
				<td>
					<table align="center">
						<tr>
							<td><input type="radio" name="mradio"> <b>1</b></td>
							<td><input type="radio" name="mradio"> <b>2</b></td>
							<td><input type="radio" name="mradio"> <b>3</b></td>
						</tr>
						<tr>
							<td><input type="radio" name="mradio"> <b>4</b></td>
							<td><input type="radio" name="mradio"> <b>5</b></td>
							<td><input type="radio" name="mradio"> <b>6</b></td>
						</tr>
						<tr>
							<td><input type="radio" name="mradio"> <b>7</b></td>
							<td><input type="radio" name="mradio"> <b>8</b></td>
							<td><input type="radio" name="mradio"> <b>9</b></td>
						</tr>
					</table></td>
			</tr>
			<tr>
				<td>
					<table align="center"
						style="border: 2px solid black;text-align: center;" width="300px"
						height="300px">
						<tr>
							<td rowspan="2"
								style="color: green;background-color: red;width: 100px;height: 200px;border: 2px solid black;text-align: center;"
								align="center"><input type="radio" name="mradio"> <b>A</b>
							</td>
							<td colspan="2" width="200px" height="100px"
								style="border: 2px solid black;text-align: center;background-color: orange;color: blue;"
								align="center"><input type="radio" name="mradio"> <b>B</b>
							</td>
						</tr>
						<tr>
							<td width="100px" height="100px"
								style="border: 2px solid black;background-color: yellow;color: red;text-align: center;"
								align="center"><input type="radio" name="mradio"> <b>C</b>
							</td>
							<td rowspan="2" width="100px" height="200px"
								style="background-color: green;color: black;text-align: center;border: 2px solid black;"
								align="center"><input type="radio" name="mradio"> <b>D</b>
							</td>
						</tr>
						<tr>
							<td colspan="2" height="100px" width="200px"
								style="border: 2px solid black;background-color: blue;color: white;text-align: center;"
								align="center"><input type="radio" name="mradio"> <b>E</b>
							</td>
						</tr>
					</table></td>
			</tr>
			<tr>
				<td align="center"><input type="submit" value="提交" style="text-align: center;"
					align="middle"></td>
			</tr>
		</table>
	</form>
</body>

在使用js语言添加响应方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<script type="text/javascript">
	function foo() {
		var rdo = document.form1.mradio;
		//var a = rdo;
		for ( var i = 0; i < rdo.length; i++) {
		document.write("不是这个");
			if (rdo[i].checked) {
			//document.write("是这个");
				if (i >= 9) {
					var str;
					switch (i) {
					case 9:
						str = "A";
						break;
					case 10:
						str = "B";
						break;
					case 11:
						str = "C";
						break;
					case 12:
						str = "D";
						break;
					case 13:
						str = "E";
						break;
					}
					alert("您选择了" + str);
				} else {
					alert("您选择的是第" + (i + 1) + "个单选框");
				}
			}
		}
	}
</script>

实现的效果：

image

效果2：

image

框架, 界面, css, html, javascript
本文由作者按照 CC BY 4.0 进行授权