#父子窗口传值（案例）

来源：互联网发布：海西教育网络培训平台编辑：程序博客网时间：2024/05/24 04:12

父子窗口传值（案例）

分析：

完成的效果： 打开一个页面 ，在这个页面中点击一个按钮，弹出一个新的页面，并且这个页面上的值可以传到 第一个页面。

用到的方法事件：

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>

0 0

#父子窗口传值（案例）

父子窗口传值（案例）

分析：

用到的方法 事件：

1.父窗口（第一个页面）

子窗口（第二个页面）

重要知识点

1.window.opener(简写.opener)

2.this.innerHTMl

用到的方法事件：