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”中的表单值，于是使用这样的 两行代码：
就获取了ID为“navigator”页面的表单值。
本文展示的是同级页面表单数据的共享方法，父子页面的数据共享类似，请大家自己实践一下。
望每天进步一点，