1. 程式人生 > >#父子視窗傳值(案例)

#父子視窗傳值(案例)

父子視窗傳值(案例)

分析:

完成的效果: 開啟一個頁面 ,在這個頁面中點選一個按鈕,彈出一個新的頁面,
並且這個頁面上的值可以傳到 第一個頁面。

用到的方法 事件:

  • 1.父視窗(第一個頁面)


  • 首先頁面載入
    *window.onload*

  • 第一個頁面的點選事件
    .onliclk

  • - 跳轉新的頁面。
    window.open

  • 子視窗(第二個頁面)


  • 首先頁面載入
    *window.onload*

  • 傳值
    window.opener
    .onclick

  • 賦值
    innerHTML
    獲取標籤中所有的內容(包括HTML標籤一起)

重要知識點

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>