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

有一个这样的功能：点击页面中的链接，打开一个新的窗口(新标签)，这个时候需要在新窗口的页面中操作源页面的元素或者调用里面的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方法// 注意这里一定要使用openerwindow.opener.test();});</script>

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

浏览器新标签操作源页面元素相关推荐

google浏览器谷歌搜索引擎怎么设置单击在新标签页打开页面
总述: 因为在平时用谷歌搜东西的时候想打开一个页面都要右键在新标签页打开页面,忽然找到一种方式可以直接单击然后在新标签页打开页面. 方法: 1.首先得有一个google账户.我没试过,可能没账户也可以 ...
ios开发跳转safari_阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
最近为了更好地接触移动Web 开发狠心购买了一台ipad mini(之前一直都是借同学的,借多了就不好意思了).拿来调试DeveMobile 与EaseMobile 主题时候发现了不少问题,现在在一 ...
iframe标签里面的页面元素只读
iframe标签里面的页面元素只读,可以通过设置一个只读的透明div进行遮罩实现. html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
Cypress之模拟键盘鼠标操作以及页面元素拖动操作
上篇文章讲解了使用cypress框架时,如何上传或者下载文件,以及定位操作iframe和shadow dom下的页面元素.此次课程将讲解如何模拟键盘输入.鼠标操作以及如何拖动页面元素,另外,会介绍如何 ...
Chrome浏览器新标签页设置首页主页修改添加网站Infinity插件好用
Infinity new tab 是一款美观实用的chrome 新标签页.最常访问的网站添加,修改,删除网址都有,每日一图,云备份等功能都具备.是一款基于html5的Chrome扩展程序,它重新定义了 ...
html5引入的新标签canvas,HTML页面中添加Canvas标签示例
怎样在html5中添加canvas标签标签是 HTML 5 中的新标签. 定义和用法标签定义图形,比如图表和其他图像. 标签只是图形容器,您必须使用脚本来绘制图形. 实例通过 canvas 元素 ...
yandex禁止java script_Yandex最新版本浏览器新标签页按钮显示俄文的解决办法
最新的Yandex 20.11.3.179版本浏览器的语言包出现以下错误: 1.zh-CN.pak语言包里面有些俄文没有翻译完,中文"剪切"只翻译了"切".故重 ...
Yandex浏览器新标签页按钮显示俄文的解决办法
求一个解决新标签页按钮显示为俄文的真正办法,下文只能把新标签页按钮改成英文,其余为中文.希望有人能知道新标签页按钮的文字封装在哪个文件里面,然后对文件进行修改. 最新的Yandex 20.11.3.1 ...
yandex浏览器新标签页按钮显示俄文的解决方案
yandex,俗名红裤衩,事俄国的google 开发的chromium浏览器也不错,但是用的时候遇到了一个问题:新标签页的几个按钮显示俄文,语言设成英文,这几个按钮会显示英文,但是设成中文,就会显示俄 ...

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

浏览器新标签操作源页面元素相关推荐

最新文章

热门文章