Frameset 框架下的子页面数据交互问题

Tim_long

于 2018-02-27 21:53:11 发布

阅读量2.2k

点赞数 1

分类专栏： web开发 frameset frame页面数据共享

本文链接：https://blog.youkuaiyun.com/qq_38161676/article/details/79393547

版权

web开发同时被 3 个专栏收录

5 篇文章

订阅专栏

frameset

1 篇文章

订阅专栏

frame页面数据共享

1 篇文章

订阅专栏

frame 页面表单数据交互问题

绝大部分的网站的界面都须通过frameset框架进行排版，以区分功能区，并给用户良好的体验。于是在做；这样的网页时，父子页面的数据交互，兄弟页面的数据交互是开发时必然要面临的问题。

第一次做开发时，由于经验不足，在网上查询了许多资料并经过多次实验，我发现大多不可靠，最终找到了一种很合适的页面间数据交互的方法，觉得有必要记录一下，以警自己，示他人。

frameset父框架前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>试题管理</title>
</head>
<frameset set rows="40px, *">
	<frame src="head.html" id="head" name="head"></frame>
	<frameset set cols="*, 90%" id="secondLayer">
		<frame src="createPaperNavigator.html" id="navigator" name="navigator"></frame>
		<frame src="producePaper.html" id="main" name="main"></frame>
	</frameset>
</frameset>
</html>

子页面“createPaperNavigator.html”代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建试卷导航栏</title>

<link rel="stylesheet" type="text/css" href="../../CSS/nav.css">
<link rel="stylesheet" type="text/css" href="../../font/iconfont.css">

</head>
<body>
	<div class="nav">
		<div class="nav-top">
			<div id="mini"
				style="border-bottom: 1px solid rgba(255, 255, 255, .1)">
				<img src="../../img/mini.png">
			</div>
		</div>
		<ul>
			<li class="nav-item"><a href="#" id="choice"><i
					class="my-icon nav-icon icon_1"></i><span>选择题</span><i
					class="my-icon nav-more"></i></a>

				<ul>
					<li><input type="text" id="choice_num"
						placeholder="请输入试卷中选择题的数量"></li>
				</ul>
			</li>
			<li class="nav-item"><a href="#" id="gap_fill"><i
					class="my-icon nav-icon icon_2"></i><span>填空题</span><i
					class="my-icon nav-more"></i></a>
					
					<ul>
					<li><input type="text" id="gap_fill_num"
						placeholder="请输入试卷中填空题的数量"></li>
				</ul>
			</li>

			<li class="nav-item"><a href="#" id="answerQues"><i
					class="my-icon nav-icon icon_3"></i><span>简答题</span><i
					class="my-icon nav-more"></i></a>
						<ul>
					<li><input type="text" id="answerQues_num"
						placeholder="请输入试卷中简答题的数量"></li>
				</ul>
					</li>
		</ul>
	</div>
	<div style="text-align: center;">
		<p>
	</div>

	<script type="text/javascript" src="../../JS/jquery.min.js"></script>
	<script type="text/javascript" src="../../JS/nav.js"></script>
	<script src="../../JS/jquery-3.2.1.min"></script>

	<script type="text/javascript">
		$(document).ready(function() {

		//定义各种题型的数量变量
		var choice_num = 0;
		var gap_fill_num = 0;
		var answerQues_num = 0;
		$("#choice_num").change(function() {
		var posInt_reg = /^[1-9]\d*$/;

		if (posInt_reg.test($("#choice_num").val().trim())) {
		choice_num = $("#choice_num").val().trim();	
		}
								
// 		alert(document.getElementById("choice_num").value.trim());
		});
		$("#gap_fill_num").change(function() {
		var posInt_reg = /^[1-9]\d*$/;
		if (posInt_reg.test($("#gap_fill_num").val().trim())) {
		gap_fill_num = $("#gap_fill_num").val().trim();
		}
// 		alert(gap_fill_num);
		});

		$("#answerQues_num").change(function() {
		var posInt_reg = /^[1-9]\d*$/;
		if (!posInt_reg.test($("#answerQues_num").val().trim())) {
		answerQues_num = $("#answerQues_num").val().trim();
		}
// 		alert(answerQues_num);
		});
					
		});
	</script>
</body>
</html>

子页面“producePaper.html”代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
		<div id="textareaBlock">
			<textarea cols="100px" rows="50px" id="display_area">
			
			</textarea>
		</div>
	<input type="button" id="submit" value="提交">

</body>

<script src="../../JS/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var choice_num;
		var gap_fill_num;
		var answerQues_num;
		
// 兄弟框架间的引用 如果两个框架同为一个框架的子框架，
// 它们称为兄弟框架，可以通过父框架来实现互相引用，
// 例如一个页面包括2个子框架： 
// <frameset rows="50%,50%">      
// <frame src="1.html" name="frame1" />      
// <frame src="2.html" name="frame2" /> 
// </frameset> 
// 在frame1中可以使用如下语句来引用frame2： self.parent.frames["frame2"];
		var navigatorFrame = parent.document.getElementById("navigator").contentWindow;
		
		$("#submit").click(function(){
			choice_num = navigatorFrame.document.getElementById("choice_num").value;
				alert(choice_num);
// 				alert("somesthing");
		});
	});
</script>

</html>

这里，我们在“main”frame中调用“navigator”中的表单值，于是使用这样的两行代码：