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”頁面的表單值。
本文展示的是同級頁面表單數據的共享方法，父子頁面的數據共享類似，請大家自己實踐一下。
望每天進步一點，