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

最新推荐文章于 2024-07-08 15:34:48 发布
最新推荐文章于 2024-07-08 15:34:48 发布
阅读量5.1k 收藏 2
点赞数
分类专栏： JS 前端 文章标签： js html angular javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Karber/article/details/117359251
版权
本文介绍了如何使用JavaScript和Angular在父页面中监听iframe内的子页面事件，并做出相应操作，如改变父页面上的input框和div的值。通过子页面的window.parent.postMessage方法发送事件，父页面通过事件监听来接收并处理这些事件。
摘要由CSDN通过智能技术生成

本文介绍父页面监听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="text" value="0" />
    <div id="displayDiv">0</div>
    <iframe id="myIframe" width="100%" height=
最低0.47元/天 解锁文章
Karber
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe 的onload事伯
康林工作室
08-07 3594
很多时候，我们会需要改变一个iframe的地址（src属性），或者使用表单(form)的target在指定的iframe进行提交后，在 iframe加载完毕(onload)时立即响应某个操作，以提高WEB应用程序的价值。本文讨论了跨浏览器的iframe onload事件的监听方法。如果你没时间去阅读全文，可以看解决方案的内容概要：同域的页面嵌套，最好的是让内嵌的页面调用父页面的函数，如
js 监听iframe加载完成事件，并动态修改iframe内嵌页样式，动态iframe高度
ZHENG
04-26 5948
<script type="text/javascript"> $(document).ready(function (e) { var iframe = document.getElementById("OfficeMain"); if (iframe.attachEvent) { ...
嵌入的iframe 鼠标点击iframe后事件无响应
最新发布
weixin_44588893的博客
07-08 623
页面中嵌入 iframe 标签,当我们给页面添加了事件之后,鼠标点击到 ifarme 上,事件会失效。
监听iframe中的鼠标点击事件
Nobita
10-30 6021
是否能监听iframe中的鼠标点击？ 难题1：跨源无法突破 难题2：监听无效 经各种尝试后放弃，无解！ 建议：在Iframe窗体里面，执行了某个事件之后，触发父窗口页面的方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1..
vue给iframe页面添加点击事件，刷新用户无操作时自动退出时间
weixin_48512601的博客
04-18 2259
但是对于iframe 引入的外部页面，再点击或者操作页面事件时，却获取不到监听，此时就需要对iframe页面做自定义事件处理。一般是对 window.document 添加 onmousedown，来刷新时间。前提: 登录类的页面，用户在登录进入系统后，如果长时间无操作，都会有自动退出功能。项目中使用的是监听页面是否被点击来刷新用户无操作是自动退出的时长。
iframe消息监听传递
12-03
解决iframe跨域消息传递的问题，并且可以多个iframe间进行消息传递
父级页面监听iframe点击事件
PGD_607的博客
12-09 5429
通过contentDocument属性 定义和用法： contentDocument 属性以 HTML 对象返回框架容纳的文档。 语法：frameObject.contentDocument html: <iframe id="iframe" frameborder=0 scrolling="no"></iframe> 父级页面js: document.getEleme...
父页面监听iframe嵌套子页面的点击事件
热门推荐
onlyoneLIJINGYI的博客
06-20 1万+
在父页面中嵌入子页面
iframe和父窗体之间的互相监听方法
b9264826的博客
09-29 763
例如：一个父窗体点击了个提交表单事件，同时要将提交的服务器返回处理结果显示在父窗体的iframe页面中，父窗体通过获得iframe中返回的结果来处理父窗体的部分数据。此时就要监听iframe的内容变更。 在IE下直接可以用 $get("#frame_hidden").onreadystatechange = function () { ...
javascript —— 父页面监听iframe子页面的自定义事件
huzhenv5的博客
01-16 8135
在html中，当iframe想通过自定义事件的方式给父页面传递消息时，我们该如何实现呢？ 怎么创建自定义事件 创建自定义事件可以通过new CustomEvent()的方式创建，代码如下： var bEvent = new CustomEvent("tReady", { detail: { msg: "2000ms ok" }, bubbles: true,...
内子
03-04
自述文件ER図： : テーブル定义书： ://docs.google.com/spreadsheets/d/1N47YNUUY6kwCEUwJaUG2z3brxZpq_fXURs-8QbabRsw/edit?usp sharingアプリケーション详细设计： ://docs.google....
响应式网页布局-仿三星官网首页
09-01
响应式网页布局是一种现代网页设计技术，旨在提供适应不同设备屏幕尺寸和方向的优化用户体验。在仿三星官网首页的设计中，这种技术尤为重要，因为它确保了无论是桌面、平板还是手机用户，都能流畅地浏览和交互。以下...
在同一页面设置不同文字链接效果的样式.rar
07-04
在网页设计中，链接（Link）是...实践过程中，还可以结合JavaScript（JS）特效进一步增强用户体验，比如添加动态过渡效果、提示信息等。在本教程的压缩包文件中，可能包含了一些示例代码或预览页面，供你参考和学习。
TDE网站：TDE登陆页面
02-15
5. **响应式设计**：利用媒体查询(`@media`)，可以根据不同的屏幕尺寸调整flexbox布局，使TDE登陆页面在不同设备上都能呈现出良好的视觉效果。 在TDE-Website-master这个压缩包文件中，我们可以找到该项目的所有源...
ScrollView 监听子控件
12-17
本篇文章将深入探讨如何实现ScrollView内子控件的监听。 首先，ScrollView本身并不直接支持监听其内部子视图的事件。因此，我们需要通过一些技巧来达成这个目标。一种常见的方法是使用递归的方式遍历ScrollView的...
js 监视 iframe 或 frameset 的内容变动
文盲的专栏
03-21 3851
最近做一个项目，再页面内签入了一个 iframe，然后 iframe 内的内容经常变动，结果 iframe 的高度就无法固定了，需要根据内部显示的实际内容来定义 iframe 的高度。 经过测试，得到了以下代码，可以对 iframe 进行监视 // 使用了 jquery ，不使用的请自行修改为原生 js $(ducument).ready(function(){ // 当页面加载完后
js 监控iframe URL的变化
octopus的专栏
09-10 8542
iframe的url可以前端任何地址，这样就可能出现漏洞，如果钓鱼网站通过js把src改成了危险地址，如果没有监控，就会有很大隐患。所以监控iframe的url变化就是必须要解决的问题了。 第一印象的解决方案是通过setInterval轮询监控，貌似不太理想了，而且有延迟。 千般搜索，终于找到了好的方法，可以通过H5新增的MutationObserver来解决，配合DOMAttrModified和onpropertychange来解决兼容性问题。 废话少说，直接上代码。 index.html代码
jQuery Iframe 父页面监听子页面的鼠标点击事件
08-27 1万+
一、父页面加入iframe： &lt;body&gt; &lt;iframe id="ifrmReport" src="/ReportForm/ZKZProblemSummaryPartial" name="ifrmReport" scrolling="no" frameborder="0"&gt;&lt;/iframe&gt; &lt;/body
jq监听子元素被点击_jQuery获取子iframe中点击事件
weixin_39587029的博客
12-19 984
今天OA里有个需求，要在一个链接后，增加当前用户的账户密码，再跳转。打开页面查看源码，发现，这个链接在iframe里，以为能够根据iframe直接find出来试了试。报错：Uncaught TypeError: parent.triggerMouseupHandle is not a function网上找了下。iframe.contents().find("a")，是能成功获取a标签链接，拼接参...
段内子程序实现从键盘输入10哥字母并将其ASCCII码存入字节数组STRING中
06-03
下面是一段使用 BIOS 中断实现从键盘输入 10 个字母并将其 ASCII 码存入字节数组 STRING 中的汇编代码。假设 STRING 的起始地址为 DS:SI，整个代码段的段名为 CODE。 ``` CODE SEGMENT ASSUME CS:CODE, DS:CODE ORG 100h START: MOV AX, CODE ; 把 CODE 段的段地址放入 AX 中 MOV DS, AX ; 把段地址放入 DS 中 MOV SI, OFFSET STRING ; 把 STRING 的偏移地址放入 SI 中 MOV CX, 10 ; 循环 10 次 READ_LOOP: MOV AH, 0 ; 调用 BIOS 中断 16h 的功能 0，等待用户输入 INT 16h MOV [SI], AL ; 把 AL 中的 ASCII 码存入 STRING 数组中 INC SI ; 偏移量加 1，指向下一个数组元素 LOOP READ_LOOP ; 循环 READ_LOOP，直到 CX = 0 ; 在这里可以对 STRING 数组进行处理 MOV AH, 4ch ; 退出程序 INT 21h STRING DB 10 DUP (?) ; 定义 10 个字节的数组，初始值为 0 CODE ENDS END START ``` 这段代码首先把 CODE 段的段地址放入 AX 中，然后把段地址放入 DS 中。接着，它把 STRING 的偏移地址放入 SI 中，准备从键盘读入字符并存入这个数组。 循环开始之前，代码将 CX 初始化为 10，表示需要读入 10 个字符。循环体中，代码调用 BIOS 中断 16h 的功能 0，等待用户输入。用户输入的字符的 ASCII 码存放在 AL 中，代码将其存入 STRING 数组中，并将 SI 的值加 1，指向下一个数组元素。 循环结束后，可以对 STRING 数组进行处理，比如输出数组中的内容。最后，代码调用 DOS 中断 21h 的功能 4ch，退出程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值