#父子視窗傳值(案例)
阿新 • • 發佈:2019-02-02
父子視窗傳值(案例)
分析:
完成的效果: 開啟一個頁面 ,在這個頁面中點選一個按鈕,彈出一個新的頁面,
並且這個頁面上的值可以傳到 第一個頁面。
用到的方法 事件:
|
|
重要知識點
1.window.opener(簡寫.opener)
window.opener 返回的是建立當前視窗的那個視窗的引用,
opener即誰開啟我的,比如A頁面利用window.open彈出了B頁面視窗,
那麼A頁面所在視窗就是B頁面的opener,在B頁面通過opener物件可以訪問A頁面。
2.this.innerHTMl
物件裡面的內容(當前事件)
案件程式碼:
父頁面的程式碼
1--JavaScript部分 <script type="text/javascript"> window.onload = function(){ (function() { var btn = document.getElementById("btn"); btn.onclick = function () { window.open("子頁面.html", "", "width=400,height=400,left=500, top=300");//window.open 彈出一個新的頁面視窗。 } }()); }
2--HTml部分
<body>
<input id="btn" type="button" value="選擇你喜歡的明星"/><br/>
我喜歡:<span id="star">?</span>
</body>
子頁面的程式碼
1--JavaScript部分
<script type="text/javascript">
window.onload = function(){
var li1 = document.getElementsByTagName("li");
for(var i = 0;i < li1.length;i++){
li1[i].onclick = function (){
window.opener.document.getElementById("star").innerHTML = this.innerHTML;
};
}
};
2--HTml部分
<body>
<ul>
<li>劉德華</li>
<li>周杰倫</li>
<li>張惠妹</li>
<li>范冰冰</li>
<li>張學友</li>
</ul>
</body>