#父子窗口传值（案例）

最新推荐文章于 2021-11-12 22:45:11 发布

HeSir。

最新推荐文章于 2021-11-12 22:45:11 发布

阅读量800

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/HeSir_/article/details/49407355

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

父子窗口传值（案例）

分析：

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

用到的方法事件：

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>

HeSir。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

#父子窗口传值（案例）

父子窗口传值（案例）

分析：

用到的方法 事件：

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

子窗口（第二个页面）

重要知识点

1.window.opener(简写.opener)

2.this.innerHTMl

用到的方法事件：