JS子父窗口互相取值賦值詳解介紹

時間  2020-08-17
標籤 窗口 互相 取值 賦值 詳解 介紹 欄目 JavaScript 简体版
原文   原文鏈接

子窗口賦值到父窗口javascript

 代碼以下php

 複製代碼
<script>
function openWin(str) {
    window.open(siteurl+"popup/"+str, null,'width=800,height=500'); // 打開窗口
} 
</script> 
<input type="text" id="title" name="picPath" value="<?php if(isset($pic)) {echo $pic['Path'];}?>" /> 
<a href="javascript:;" onclick="openWin('searchPic');">圖片</a>

 

子窗口：html

 代碼以下 複製代碼


<html>
    <head>
        <title>圖片搜索</title>
    </head>
    <body>
        <script>
            function getValue() {
                window.opener.document.getElementById('title').value = document.getElementById('picPath').value // 賦值
                window.close(); // 關閉窗口
            }
        </script>
        <input type="text" id="picPath" />
        <input type="button" value="肯定" onclick="getValue()" />
    </body>java


一、子窗口與父窗口間通訊less

(1) 使用window.open()建立的窗口與父窗口通訊jsp

能夠在子窗口頁面中經過window.opener來獲取父窗口對象，獲取以後子窗口即可以對父窗口執行刷新，傳值等操做。函數


如：post

 代碼以下 複製代碼

window.opener.location.reload(); //子窗口刷新父窗口
window.opener.location.href //獲取父窗口href
window.opener.locaiton.pathname //獲取父窗口路徑名this

//刷新父頁面
window.location.href=window.location.href ; //從新定位父頁面
window.location.reload;url


(2) 模態窗口與父窗口通訊

經過使用showModelDialog(),及showModelessDialog（）方法建立的子窗口想與父窗口通訊時，不能經過window.opener

來獲取父窗口對象。要實現通訊，必須在建立模態子窗口時向子窗口傳入父窗口對象。

實現方式爲：

在父窗口中：

 代碼以下 複製代碼

var newWin=window.showModelDialog(url,window,'');
newWin.open();

此時參數window便是父窗口對象

例子


A頁面<script type="text/javascript">  
 

 代碼以下 複製代碼

        function popUp(url) {  
            objSubWin = window.open(url, "Popup", "toolbar=no,scrollbars=no,location=no,statusbar=no,menubar=no,resizable=0,width=300,height=80");  
            objSubWin.focus();  
        }  
  
        function SetValue(val) {  
            var amount = document.getElementById('<% = TextBoxAmount.ClientID %>');  
         amount.value = val;  
     }  
  
    </script>  
[csharp]  
<asp:TextBox ID="TextBoxAmount" runat="server" Enabled="false"></asp:TextBox>  
            <asp:Button ID="Button1" runat="server" Text="Call child window" OnClientClick="popUp('PageB.aspx')" />  
 
B頁面：
<script type="text/javascript">
        function isNumeric(keyCode) {
            return ((keyCode >= 48 && keyCode <= 57) || keyCode == 8)
        }
 
        function calc() {
            if (window.opener != null && !window.opener.closed) {
                var qty = document.getElementById('<% = TextBoxqty.ClientID %>');
                var price = document.getElementById('<% = TextBoxPrice.ClientID %>');
 
                window.opener.SetValue(parseInt(qty.value) * parseInt(price.value));
            }
        }
    </script>
數量<asp:TextBox ID="TextBoxqty" runat="server" onkeydown="return isNumeric(event.keyCode);" onpaste="return false;" Width="50"></asp:TextBox>
            * 單價<asp:TextBox ID="TextBoxPrice" runat="server" onkeydown="return isNumeric(event.keyCode);" onpaste="return false;" Width="50"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" Text="Calculate" OnClientClick="calc()" />

在子窗口中：

需首先獲取父窗口對象，而後才能使用父窗口對象。因爲父窗口對象是在建立
子窗口時經過傳入參數的方式傳入的，所以，在子窗口中也只能經過獲取窗口參數的方式獲取父窗口對象。獲取方式以下：

 代碼以下 複製代碼
var parent=widnow.dialogArguments；

變量parent即是父窗口對象。

例如：

 代碼以下 複製代碼

//經過子窗口提交父窗口中的表單：form1,提交後執行查詢操做
var parent=window.dialogArguments;
parent.document.form1.action="QueryInfor.jsp";
parent.submit();

//刷新父頁面
var parent=window.dialogArguments;
parent.location.reload();

//從子窗口傳值到父窗口
要實如今模態子窗口中傳值到父窗口，須要使用window.returnValue完成

實現方法以下：

在子窗口中：

 代碼以下 複製代碼

//獲取父窗口某字段值，對該值加一後返回父窗口
var parent=window.dialogArguments;
var x=parent.docuement.getElementById("age").value;
x=x+1；

//傳回x值
window.returnValue=x;

在父窗口中：

 代碼以下 複製代碼

//獲取來自子窗口的值
var newWin=window.showModelDialog(url,window,'');
if(newWin!=null)
document.getElementByIdx_x("age").value=newWin;

//在子窗口中設置父窗口的值
在子窗口中向父窗口中傳入值彷佛沒有直接設置父窗口中的值來得明瞭。直接設置父窗口中元素的值顯得要更靈活一些,不過具體使用哪一種方法要根據實際狀況和已有的實現方式而定，由於若是使用了不切實際的方法不只下降開發效率，也下降了執行效率，每每也會形成不優雅的實現方式和代碼風格。

子窗口設置父窗口的值使用方法以下：

子窗口中：

 代碼以下 複製代碼

var parent=window.dialogArguments;
var x=parent.document.getElementByIdx_x("age").value;

x=x+1；
//設置父窗口中age屬性值

parent.document.getElementByIdx_x("age").value=x;


子窗口和父窗口交互的內容，是把子窗口的信息傳遞給父窗口，而且關閉本身等等，或者是父窗口把本身的信息傳遞給子窗口等等。

1。父窗口傳遞信息給子窗口

看代碼實例：

 代碼以下 複製代碼

<script language=javascript>

function outPut()
{
//獲取父窗口的文本信息賦值給text
var text = document.abc.text.value;
//打開子窗口，而且把操做句柄賦值給win變量，如下全部操做都是針對win對象的
var win = window.open(」",」mywin」, 「menubar=no,width=400,height=100,resizeable=yes」);
//輸出基本信息
win.document.writeln(」<title>輸出結果</title>」);
win.document.writeln(」你的信息是：<p>」);
//輸出從父窗口獲取的信息
win.document.writeln(text);
win.document.close();
win.focus();
}
</script>


<form name=abc method=post>
<input type=text name=text size=50>
//調用上面的函數
<input type=button value=提交 onClick=」outPut()」>

</form>


2。子窗口傳遞參數給父窗口

咱們對上面的代碼進行改造：

 代碼以下 複製代碼

<script language=javascript>

function outPut()
{
var text = document.abc.text.value;
var win = window.open(」",」mywin」, 「menubar=no,width=400,height=100,resizeable=yes」);
win.document.writeln(」<title>輸出結果</title>」);
win.document.writeln(」你的信息是：<p>」);
win.document.writeln(text);
win.document.writeln(」<input type=text name=child value=子窗口信息>」);

//對子窗口自己操做，使用self對象，對父窗口操做使用opener對象，這是關鍵
//把子窗口中表單的值回傳給父窗口，取代父窗口表單之前的值，而後關閉子窗口
win.document.writeln(」<input type=button value=關閉本身 onClick= window.opener.abc.text.value=self.child.value;self.close() >」);
//能夠控制關閉父窗口
win.document.writeln(」<input type=button value=關閉父窗口 onClick= window.opener.opener=null;window.opener.close() >」);
//刷新父窗口
win.document.writeln(」<input type=button value=刷新父窗口 onClick= window.opener.location.reload() >」);

win.document.close();
win.focus();
}
</script>

<form name=abc method=post>
<input type=text name=text size=50>
<input type=button value=提交 onClick=」outPut()」>

</form>


3。不是同頁面的子窗口和父窗口交互

假設咱們涉及到外部程序，好比php、asp等等，那麼咱們處理的多是兩個頁面，好比，上傳功能，咱們就是須要打開一個新頁面，而後再把新頁面中的值傳遞給父頁面。

 代碼以下 複製代碼

局部代碼實例：

<input type=」input」 value=」" name=」input_tag」 id = 「input_tag」 onKeyUp=」clearPreTagStyle()」 size=」40″>
<input type=」hidden」 value=」0″ name=」tagid」 id=」tagid」>
<input type=」button」 value=」標籤」 onclick=」popUpWindow( tag.php?tag= +escape(document.tryst_form.input_tag.value))」>

以上是父窗口的部分代碼，裏面的popUpWindow是封裝好的window.open函數，因此理解面面的tag.php是另一個頁面就能夠，咱們須要把當前表單中的值提交給tag.php頁面去處理。


tag.php部分代碼：

查詢標籤結果：

 代碼以下 複製代碼

<a href=」#」 name=」tag_1″>生活</a><a href=」#」 onclick=」opener.document.tryst_form.input_tag.value = document.tag_1.innerHTML」>加入該標籤</a>

<a href=」#」 name=」tag_2″>生活秀</a><a href=」#」 onclick=」opener.document.tryst_form.input_tag.value = document.tag_2.innerHTML」>加入該標籤</a>

這個就是咱們的子窗口，g:w7垠件的專e 育,網E咱們要把tag_1和tag_2返回到子窗口中，雖然他們不是同一個頁面。這裏有個知識點，就是咱們如何獲取鏈接中的值，咱們使用 innerHTML屬性：document.tag_2.innerHTML 這個就是咱們獲取了tag_2的值「生活秀」，咱們也能使用其餘方法獲取，好比：document.all.tag_2.innerHTML，

或者this.innerHTML就是指自己的連接的值。


訪問父窗口也是使用opener對象來處理：opener.document.tryst_form.input_tag.value，

就可以改變父窗口的值。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程