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

3230人阅读 评论(0) 收藏 举报
分类:

有一个这样的功能:点击页面中的链接,打开一个新的窗口(新标签),这个时候需要在新窗口的页面中操作源页面的元素或者调用里面的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

这里写图片描述

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    编程技术学习交流群 :154514123
    微信
    个人资料
    • 访问:464480次
    • 积分:7272
    • 等级:
    • 排名:第3032名
    • 原创:303篇
    • 转载:34篇
    • 译文:2篇
    • 评论:93条
    最新评论