浏览器新标签操作源页面元素

有一个这样的功能：点击页面中的链接，打开一个新的窗口(新标签)，这个时候需要在新窗口的页面中操作源页面的元素或者调用里面的JS函数。刚开始看到这个需求的时候，我以为是做不了的，感觉浏览器不会给这种权限的，事实证明，我还是太嫩了~

其实这个功能实现起来很简单，把新打开的窗口当成是一个内嵌的 iframe 就可以了，众所周知，iframe 子窗口可以随意操作父级窗口里的元素，好了，废话说完了，直接上代码。

源页面代码

<a href="javascript:openUrl(url);" target="_blank">点击弹出新窗口</a>

<script type="text/javascript">
    function openUrl(url){
        // 此处一定要使用oepn的方式来打开窗口
        window.open(url);
    }

    function test(){
        console.log("测试调用");
    }
</script>

新页面代码

<script type="text/javascript">
    $(function(){
        // 取父窗口的元素方法：
        $(selector, window.parent.document);

        // 调用源页面内的JS方法
        // 注意这里一定要使用opener
        window.opener.test();
    });

 </script>

技术交流学习或者有任何问题欢迎加群：154514123