父级页面监听iframe点击事件

原创已于 2022-01-26 14:27:38 修改 · 5.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #父级监听iframe

于 2019-12-09 16:21:59 首次发布

Html Css Js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在HTML的iframe元素中使用contentDocument属性来监听子框架内的点击事件，通过JavaScript操作实现对iframe内文档的交互控制。

通过contentDocument属性
定义和用法：
contentDocument 属性以 HTML 对象返回框架容纳的文档。
语法：frameObject.contentDocument

html:
<iframe id="iframe"  frameborder=0 scrolling="no"></iframe>

父级页面js:
document.getElementById('iframe').contentDocument.addEventListener('click', () => {
	...
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

PGD_606

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

iframe子页面如何监听父页面的变化，并做出响应

popstarqq的博客

10-28

3325

var tabWatcher = { activeTabName: '' } let val = '' let tempVal = '' Object.defineProperty(tabWatcher, 'activeTabName', { enumerable: true, configurable: true, get () { console.log('activeTabName被读取') return val }, set (newVal) { i.

iframe 页面中获取父级页面的 localStorage 或者 sessionStorage数据

jiangjunyuan168的博客

01-24

7113

在开发的过程中遇到需要在 iframe 页面中获取父级页面系统所存储的本地数据的需求。由于浏览器的安全策略，是不允许 iframe 页面直接获取系统的存储数据的，那么要如何解决呢？

参与评论您还未登录，请先登录后发表或查看评论

js如何监听iframe内的点击事件（注意是同源的情况）

weixin_45729375的博客

08-21

2643

在开发过程中，也许会遇到一些需要给iframe内的点击绑定事件的操作，例如页面中引入了一些平台广告（广告一般是iframe的形式引入到页面），在点击广告后需要做一些别的操作（埋点数据搜集向后台上报数据），但由于同源策略的影响，这个实现并非像添加监听器那么简单。本文将提供如何实现这个功能的一些思路。

iframe监听鼠标点击事件

最新发布

03-08

### 实现父级页面接收iframe消息并使iframe全屏 #### 使用`postMessage` API进行跨域通信对于不同源的情况，现代浏览器提供了安全的方式通过 `window.postMessage()` 方法来实现在两个窗口之间传输数据。此方法...

html嵌套iframe,父级怎么获取iframe的点击事件

07-06

HTML中嵌套iframe时，要在父级元素上监听iframe的点击事件，由于浏览器的安全策略（同源策略）...如果你需要在跨域情况下监听iframe事件，可能需要服务端的支持或者使用一些第三方库如` Intersection Observer`等技术。

iframe内嵌网页通知父页面事件

码农键盘上的梦

11-11

961

在父页面中，通过监听message事件，可以获取来自iframe内嵌网页的消息。子页面可以通过JavaScript获取对父页面的引用，并调用父页面的函数或对象来通知事件的发生。确保iframe元素的src属性指向子页面的URL，并设置合适的宽度和高度以适应子页面的内容。首先，在iframe内嵌的网页中，需要定义一个事件，当需要通知父页面时触发该事件。合作通信机制：父页面和子页面必须协调使用一种通信机制来实现跨页面通信。只有当父页面和子页面具有相同的域名、协议和端口号时，才可实现跨页面通信。

监听iframe中的鼠标点击事件

Nobita

10-30

6539

是否能监听iframe中的鼠标点击？难题1：跨源无法突破难题2：监听无效经各种尝试后放弃，无解！建议：在Iframe窗体里面，执行了某个事件之后，触发父窗口页面的方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1..

父页面js监听iframe内子页面并作出响应

Karber的博客

05-28

7329

本文介绍父页面监听iframe内子页面传出的事件并作出反应的方法 父页面使用原生js 子页面使用angular 要实现的效果： 1.父页面有一个input框和一个div，初始值都为0 2.子页面有两个button，add与reduce 3.点击后分别使父页面input框和div内的值+1与-1 页面效果如下 父页面html代码 <body> <div>I'm Parent</div> <input id="displayInput" type="t

监听 iframe 点击事件

FFFF

03-03

1433

// 事件定义 var IframeOnClick = { resolution: 200, iframes: [], interval: null, Iframe: function () { this.element = arguments[0]; this.cb = arguments[1]; ...

jQuery Iframe 父页面监听子页面的鼠标点击事件

08-27

1万+

一、父页面加入iframe： <body> <iframe id="ifrmReport" src="/ReportForm/ZKZProblemSummaryPartial" name="ifrmReport" scrolling="no" frameborder="0"></iframe> </body

父页面监听多个iframe中的多种事件

mentalitys的博客

06-22

3798

我遇到的问题，后台是通过创建iframe窗口来添加页面显示的，公共页需要编写公共的事件，用正常的jquery的绑定事件无法获取到iframe内的DOM 后台多个iframe动态创建的窗口写的监听如下：我这里使用的是标签document.getElementsByTagName("iframe") 是因为有多个iframe 如果只有一个就不用for循环遍历了，只有一个完全可以使用document.getElementById('id')； $(document).ready(funct..

frame 监听按键事件

风小猪的博客

04-20

1551

当按下相关按键时，控制台会输出对应信息。

javascript —— 父页面监听iframe子页面的自定义事件

huzhenv5的博客

01-16

8765

在html中，当iframe想通过自定义事件的方式给父页面传递消息时，我们该如何实现呢？怎么创建自定义事件创建自定义事件可以通过new CustomEvent()的方式创建，代码如下： var bEvent = new CustomEvent("tReady", { detail: { msg: "2000ms ok" }, bubbles: true,...

iframe添加addEventListener无效、获取Iframe的contentWindow和contentDocument失败，不使用postMessag，如何监听iframe点击事件

weixin_44434938的博客

12-26

7034

iframe添加addEventListener无效、获取Iframe的contentWindow和contentDocument失败，不使用postMessag，如何监听iframe点击事件