开发者社区> 问答> 正文

js父窗口事件触发问题

我测试结果,子窗口可以操作父窗口内对象,但无法手动触发父窗口内对象绑定的事件,并且父窗口事件也不会冒泡

demo, 主页面:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="jquery.js"></script>
</head>
<body>
 
<input type=text id=a value=old />
 
<input type=text id=b value='click this' />
 
<script>
    $(document).ready(function() {
        $('#a').change(function() {
            console.log('a changed in main');
            fn_change();
        });
        $('#b').change(function() {
            console.log('b clicked in main');
            fn_change();
        });
 
        function fn_change() {
            console.log('a changed in main by fn call');
            $('#a').val('new'); 
        }
 
        window.open('page.html');
    });
 
</script>
 
</body>
</html>
子窗口:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="jquery.js"></script>
</head>
<body >
 
<input type=button id=btn value='click me' name=btn >
 
<script>
 
    $('#btn').click(function() {
        console.log(window.opener.document);
        //$('#a', $(window.opener.document)).change();
        $(window.opener.document).find('#a').val('nnn');    // 可以更改'#a'的值,但事件不会冒泡
        $(window.opener.document).find('#b').val('ddd');    // 可以更改 '#b'的值,但事件不会冒泡触发#a上绑定的事件
        window.opener.fn_change();
    });
 
</script>
 
</body>
</html>

你的需求可以两种办法来解决:
1、直接在子窗口中修改对象值

2、在父窗口中把事件触发执行的代码写道一个函数内,然后在父窗口事件绑定回调函数中调用此函数;在子窗口中用 window.opener.function_name() 的方式去调用

展开
收起
a123456678 2016-07-08 15:39:25 2138 0
1 条回答
写回答
取消 提交回答
  • $("#id',opener.document)

    opener.$("#id")

    是不一样的, 它们的背景不一样。 这个change事件需要显式调用

    默认是按照鼠标聚焦来触发的。

    2019-07-17 19:53:34
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript面向对象的程序设计 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载