Frameset 框架下的子頁面資料互動問題
阿新 • • 發佈:2018-12-23
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”頁面的表單值。
本文展示的是同級頁面表單資料的共享方法,父子頁面的資料共享類似,請大家自己實踐一下。
望每天進步一點,