js實現彈窗後選擇信息填入text標籤中以及需要注意的問題

下面是完整的代碼對應兩個網頁

主網頁代碼

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8" />
 6     <title>window彈窗</title>
 7 </head>
 8 
 9 <body>
10     編號:
11     <input type="text" id="numId" />
12     <br /> 姓名:
13     <input type="text" id="nameId" />
14     <br />
15     <input type="button" value="選擇" onclick="openNewWindow()" />
16     <script type="text/javascript">
17         //彈窗的方法實現
18         function openNewWindow() {
19             window.open("user.html", "", "width=250,height=150");
20         }
21     </script>
22 </body>
23 
24 </html>

彈窗代碼

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8" />
 6     <title>user</title>
 7 </head>
 8 
 9 <body>
10     <table width="200" border="1">
11         <tr>
12             <td>操作</td>
13             <td>編號</td>
14             <td>姓名</td>
15         </tr>
16         <tr>
17             <td>
18                 <input type="button" value="選擇" onclick="s1('001','愚青')">
19             </td>
20             <td>001</td>
21             <td>愚青</td>
22         </tr>
23         <tr>
24             <td>
25                 <input type="button" value="選擇" onclick="s1('002','薛之謙')">
26             </td>
27             <td>002</td>
28             <td>薛之謙</td>
29         </tr>
30         <tr>
31             <td>
32                 <input type="button" value="選擇" onclick="s1('003','馬良')">
33             </td>
34             <td>003</td>
35             <td>馬良</td>
36         </tr>
37     </table>
38 
39     <script type="text/javascript">
40         function s1(num1, name1) {
41             var theWindow = window.opener; //得到上一個窗口
42             theWindow.document.getElementById("numId").value = num1;
43             theWindow.document.getElementById("nameId").value = name1;
44             //關閉窗口
45             window.close();
46         }
47     </script>
48 </body>
49 
50 </html>

這樣做的結果是IE瀏覽器以及火狐瀏覽器可以正常操作

 

而在谷歌瀏覽器下會發現無法選中,點擊之後沒有反應

這是因爲谷歌瀏覽器的安全級別比較高,不支持本地的文件的跨網頁操作,當我把它放到服務器上的時候,就可以正常操作了

下面是在myeclipse2017中的操作(理論上也可以直接放在服務器上運行)

將html文件放在項目下,在服務器上運行

 

在谷歌瀏覽器輸入對應路徑,成功將信息填入

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章