[轉]子窗口和父窗口的函数或对象能否相互访问
生活随笔
收集整理的這篇文章主要介紹了
[轉]子窗口和父窗口的函数或对象能否相互访问
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
子窗口和父窗口的函數或對象能否相互訪問
解決思路:
???????每一個窗口其實也是一個對象,窗口內的對象或函數就相當于對象內的對象或方法,問題的關鍵是如何取得窗口對象的控制句柄,不同的窗口的控件句柄是不一樣的,下面分三種窗口討論。
具體步驟:
1.用window.open()打開的一般窗口。
<script>
var?sub
function?sub_win(){
sub=window.open()????//sub為子窗口句柄
//以數據流方式向子窗口輸出HTML代碼?,sub_function()為子窗口的演示函數
sub.document.write("<script>function?sub_function(){alert(’子窗口函數’)}<\/script><button?onClick=’opener.par_function()’>調用父窗口函數</button>")????????
sub.document.close()?//關閉子窗口的輸出流
}
function?par_function(){//父窗口的演示函數
alert("父窗口函數")
}
</script>
<button?onClick="sub_win()">打開子窗口</button><button?onClick="sub.sub_function()">調用子窗口內函數</button>
代碼運行效果如圖1.5.6所示。
圖1.5.6?在父窗口訪問子窗口的函數
從上面的代碼中可以發現,父窗口調用子窗口的函數或對象,需要在對象前加上子窗口句柄(上例中的變量sub)作前綴,要訪問子窗口中的sub_function()函數,就是sub.sub_function(),反過來,在子窗口中訪問父窗口的函數或對象,需要在前面加上opener,如opener.par_function()。
?提示:這里只是為了演示方便,以數據流方式向子窗口中輸出HTML代碼,在實際應用時直接在彈出頁中按上面所說的方法調用就行了。
2.用showModalDialog打開的模式窗口。
<script>
function?smdWin(){
win=window.showModelessDialog("demo.htm",window,"dialogWidth=200px;dialogHeight=200px;status=0;scroll=no")
}
</script>
<button?οnclick="smdWin()">打開模式窗口</button>
<input?id="oInput">
demo.htm:
<input?id="sInput">
<button?onClick="dialogArguments.oInput.value=sInput.value">傳遞文字</button>
代碼運行效果如圖1.5.7所示。
圖1.5.7?在子窗口訪問父窗口的對象
注意:在模式對話框的父窗口中無法通過鼠標操作控制訪問模式對話框的對象,但可以通過設置自動執行的腳本來實現訪問,方法同無模式對話框。
3.用showModelessDialog方法打開的無模式窗口
?<script>
var?win
function?smdWin(){
win=window.showModelessDialog("demo.htm",window,"dialogWidth=200px;dialogHeight=200px;status=0;scroll=no")
}
</script>
<button?οnclick="smdWin()">打開無模式窗口</button>
<input?id="oInput">
<button?onClick="win.sInput.value=oInput.value">傳遞文字</button>
demo.htm:
<input?id="sInput">
<button?onClick="dialogArguments.oInput.value=sInput.value">傳遞文字</button>
代碼運行效果:
圖1.5.8?在父窗口中訪問子窗口的對象
圖1.5.9?在子窗口中訪問父窗口的對象
可以看出,父窗口和子窗口的數據傳遞基本方法是一樣,只是模式窗口和無模式窗口在向父窗口傳遞數據時把一般窗口的opener換成了dialogArguments
注意:打開模式窗口或無模式窗口的第二個參數須為window,模式窗口的父窗口無法以常規方式即時向它傳遞數據,因為它的父窗口無法獲得焦點。
技巧:父窗口要給子窗口傳遞數據,還可以通過給頁地址后添加參數,然后在子窗口用location.search取值的方式來完成,還可以通過打開子窗口的第二個參數來完成,如:
<script>
var?sub
function?sub_win(){
sub=window.open("","demo","width=100,height=100")
sub.document.write("<script>alert(window.name)<\/script>")??
sub.document.close()
}
</script>
<button?onClick="sub_win()">打開子窗口</button>
圖1.5.10?通過open方法的第二個參數傳遞數據
特別提示
對于第一種情況,代碼運行后,先單擊【打開子窗口】按鈕,然后再單擊【調用子窗口內函數】和【調用父窗口函數】按鈕看效果;第二、三種情況的代碼運行后在模式/無模式窗口的文本框中填寫內容后再單擊【傳遞文字】按鈕。
解決思路:
???????每一個窗口其實也是一個對象,窗口內的對象或函數就相當于對象內的對象或方法,問題的關鍵是如何取得窗口對象的控制句柄,不同的窗口的控件句柄是不一樣的,下面分三種窗口討論。
具體步驟:
1.用window.open()打開的一般窗口。
<script>
var?sub
function?sub_win(){
sub=window.open()????//sub為子窗口句柄
//以數據流方式向子窗口輸出HTML代碼?,sub_function()為子窗口的演示函數
sub.document.write("<script>function?sub_function(){alert(’子窗口函數’)}<\/script><button?onClick=’opener.par_function()’>調用父窗口函數</button>")????????
sub.document.close()?//關閉子窗口的輸出流
}
function?par_function(){//父窗口的演示函數
alert("父窗口函數")
}
</script>
<button?onClick="sub_win()">打開子窗口</button><button?onClick="sub.sub_function()">調用子窗口內函數</button>
代碼運行效果如圖1.5.6所示。
圖1.5.6?在父窗口訪問子窗口的函數
從上面的代碼中可以發現,父窗口調用子窗口的函數或對象,需要在對象前加上子窗口句柄(上例中的變量sub)作前綴,要訪問子窗口中的sub_function()函數,就是sub.sub_function(),反過來,在子窗口中訪問父窗口的函數或對象,需要在前面加上opener,如opener.par_function()。
?提示:這里只是為了演示方便,以數據流方式向子窗口中輸出HTML代碼,在實際應用時直接在彈出頁中按上面所說的方法調用就行了。
2.用showModalDialog打開的模式窗口。
<script>
function?smdWin(){
win=window.showModelessDialog("demo.htm",window,"dialogWidth=200px;dialogHeight=200px;status=0;scroll=no")
}
</script>
<button?οnclick="smdWin()">打開模式窗口</button>
<input?id="oInput">
demo.htm:
<input?id="sInput">
<button?onClick="dialogArguments.oInput.value=sInput.value">傳遞文字</button>
代碼運行效果如圖1.5.7所示。
圖1.5.7?在子窗口訪問父窗口的對象
注意:在模式對話框的父窗口中無法通過鼠標操作控制訪問模式對話框的對象,但可以通過設置自動執行的腳本來實現訪問,方法同無模式對話框。
3.用showModelessDialog方法打開的無模式窗口
?<script>
var?win
function?smdWin(){
win=window.showModelessDialog("demo.htm",window,"dialogWidth=200px;dialogHeight=200px;status=0;scroll=no")
}
</script>
<button?οnclick="smdWin()">打開無模式窗口</button>
<input?id="oInput">
<button?onClick="win.sInput.value=oInput.value">傳遞文字</button>
demo.htm:
<input?id="sInput">
<button?onClick="dialogArguments.oInput.value=sInput.value">傳遞文字</button>
代碼運行效果:
圖1.5.8?在父窗口中訪問子窗口的對象
圖1.5.9?在子窗口中訪問父窗口的對象
可以看出,父窗口和子窗口的數據傳遞基本方法是一樣,只是模式窗口和無模式窗口在向父窗口傳遞數據時把一般窗口的opener換成了dialogArguments
注意:打開模式窗口或無模式窗口的第二個參數須為window,模式窗口的父窗口無法以常規方式即時向它傳遞數據,因為它的父窗口無法獲得焦點。
技巧:父窗口要給子窗口傳遞數據,還可以通過給頁地址后添加參數,然后在子窗口用location.search取值的方式來完成,還可以通過打開子窗口的第二個參數來完成,如:
<script>
var?sub
function?sub_win(){
sub=window.open("","demo","width=100,height=100")
sub.document.write("<script>alert(window.name)<\/script>")??
sub.document.close()
}
</script>
<button?onClick="sub_win()">打開子窗口</button>
圖1.5.10?通過open方法的第二個參數傳遞數據
特別提示
對于第一種情況,代碼運行后,先單擊【打開子窗口】按鈕,然后再單擊【調用子窗口內函數】和【調用父窗口函數】按鈕看效果;第二、三種情況的代碼運行后在模式/無模式窗口的文本框中填寫內容后再單擊【傳遞文字】按鈕。
特別說明
通過本例的學習,讀者朋友應該掌握父窗口與子窗口的相互訪問方法,還有對象的概念。
?
轉自:http://www2.flash8.net/teach/4139.htm
轉載于:https://www.cnblogs.com/Athrun/archive/2009/07/07/1518159.html
總結
以上是生活随笔為你收集整理的[轉]子窗口和父窗口的函数或对象能否相互访问的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 在Repeater控件,Repeater
- 下一篇: 关于如何生成随机记录