js监听网页iframe里面元素变化其实就是监听iframe变化

最新推荐文章于 2025-06-24 11:18:14 发布

1024小神

最新推荐文章于 2025-06-24 11:18:14 发布

阅读量2.3k

点赞数 11

CC 4.0 BY-SA版权

分类专栏： HTML前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_44786530/article/details/136418127

想要监听网页里面iframe标签内容变化，需要通过监听网页dom元素变化，然后通过查询得到iframe标签，再通过iframe.contentWindow.document得到ifram内的document，然后再使用选择器得到body元素，有了body元素，就可以通过innerHTML得到ifram里面的内容了。

监听网页dom元素发生变化函数：使用了MutationObserver

  // 创建 MutationObserver 对象并传入回调函数
  const observer = new MutationObserver((mutationsList) => {
    // mutationsList 包含了所有发生的 DOM 改动信息
    for (let mutation of mutationsList) {
      if (mutation.type === 'attributes') {
        console.log(`iframe里面属性变化 ${mutation}`)
      } else if (mutation.type === 'childList') {
        console.log('iframe里面节点发生变化')
      }
    }
  })

  // 配置观察选项
  const config = { attributes: true, childList: true }
  // 开始观察目标节点及其后代节点的变化
  observer.observe(ele, config)

然后就是获取iframe变化的函数：

const listenCsdnContent = (url: String) => {

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

1024小神

关注关注

11
点赞
踩
10

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

原生js监听dom节点属性变化

默默地博客

09-15

2836

// 选择需要观察变动的节点 const targetNode = document.getElementById('js-toc'); // 观察器的配置（需要观察什么变动） const config = { attributes: true, childList: true, subtree: true }; // 当观察到变动时执行的回调函数 const callback = function(mutationsList, observer) { // Use traditional 'for lo

js 监控iframe URL的变化实例代码

10-19

下面小编就为大家带来一篇js 监控iframe URL的变化实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

监听窗口以及DOM元素大小变化

最新发布

tzz_1122的博客

06-24

257

【代码】监听窗口以及DOM元素大小变化。

js 监视 iframe 或 frameset 的内容变动

文盲的专栏

03-21

4060

最近做一个项目，再页面内签入了一个 iframe，然后 iframe 内的内容经常变动，结果 iframe 的高度就无法固定了，需要根据内部显示的实际内容来定义 iframe 的高度。经过测试，得到了以下代码，可以对 iframe 进行监视 // 使用了 jquery ，不使用的请自行修改为原生 js $(ducument).ready(function(){ // 当页面加载完后

js实时监听窗口变化总结

weixin_33781606的博客

02-10

1208

js实时监听窗口变化总结 <script> window.onresize = function () { var Width = window.innerWidth//浏览器窗口的内部宽度（包括滚动条） || document.documentElement.clientWidth || document.body.clie...

【JavaScript】动态监听iframe高度以及监听iframe内部链接跳转

徐海东的博客

05-30

8650

在日常开发中会遇到一种情况，就是页面需要嵌套iframe，由于iframe无法自适应里面样式高度，所以我们需要去监听iframe的动态高度。当iframe内部链接发生变化，或者是后端或者网关重定向页面，如何去获取最新的iframe里面的href？对此我们可以去监听iframe的load方法，并且在iframe第一次加载完之后开始监听，保证代码的健壮性。但实际使用就会发现，在某些特定的时刻iframe的onload事件只会触发一次。有人可能会说用onload方法,例如。需要监听的iframe。

js 监控iframe URL的变化

octopus的专栏

09-10

9710

iframe的url可以前端任何地址，这样就可能出现漏洞，如果钓鱼网站通过js把src改成了危险地址，如果没有监控，就会有很大隐患。所以监控iframe的url变化就是必须要解决的问题了。第一印象的解决方案是通过setInterval轮询监控，貌似不太理想了，而且有延迟。千般搜索，终于找到了好的方法，可以通过H5新增的MutationObserver来解决，配合DOMAttrModified和onpropertychange来解决兼容性问题。废话少说，直接上代码。 index.html代码

JavaScript监听一个DOM元素大小变化

10-15

本文中提到的一种方法是通过在目标元素内动态创建一个iframe元素，使得iframe的尺寸继承自父元素，并通过监听iframe的resize事件来间接监听到父元素尺寸的变化。当父元素尺寸变化时，其内部的iframe的尺寸也会随之...

监听iframe的url变化，并且实现小程序关闭webView，跳转回小程序。

Y1436314328的博客

08-03

889

业务场景是从A页面到B页面，B页面到C页面，C页面中使用iframe标签，然后在嵌套的第三方页面中完成操作后第三方使用返回B页面。我这里的A页面其实是小程序，小程序通过webView标签访问B页面。遇到的坑：当C页面返回到B页面时，要求点击触发回退时，返回到A页面。但实际效果是触发回退事件后，返回的是C页面中iframe嵌套的页面，而不是A页面。一直的思路是当C页面回到B页面后，清空路由栈，或者重定向页面，因为当没有路由记录后，回退就不会到在到iframe中展示的页面。因为一直不成功前置守卫，

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

weixin_45729375的博客

08-21

2329

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

js监听页面大小变化

博哥的二进制世界

05-10

6205

js监听页面大小变化

js 监听隐藏元素的变化事件

07-01

对隐藏元素的监听，例如，隐藏的input框，普通change事件是无法监控的。

iframe消息监听传递

12-03

解决iframe跨域消息传递的问题，并且可以多个iframe间进行消息传递

Iframe 自适应高度并实时监控高度变化的js代码

10-29

不得不用到iframe，且被强烈要求不能让它出现滚动条！嵌入的页面肯定是高度不一的，页面中也不能出现大片空白，所以也不能写死高度！真是麻鬼烦啊！

js 监视 iframe 或 frameset 的内容变动（文盲第二版）

文盲的专栏

05-25

4925

之前写了一个js 监视 iframe 或 frameset 的内容变动，结果有人留言了，然后仔细一看，代码通用性好差，当时自己的项目能用了，就没再继续研究了今天经过一番调试，弄出来了下边这个效果，估计大家应该都能用起来了文件：test_iframe_400.html<!doctype html> <html lang="en"> <head> <me...

js监听页面的可见的变化

huai42717的博客

12-03

2219

当切换页面时，有些程序还是在进行就有可能导致页面样式乱，就监听页面可见时的变化。html js 当我们切换页面时让程序停止，切换回来时在让程序运行。

使用JavaScript实现自适应高度的IFrame并实时监测其高度变化

ByteZenith的博客

09-26

362

事件监听器，用于监测窗口大小的变化。当窗口大小发生变化时，我们获取新的窗口高度，并将IFrame的高度设置为窗口的高度。通过以上代码，我们实现了IFrame的自适应高度，并能够实时监测其高度变化。这样，无论是IFrame内容的高度变化还是窗口大小的变化，都能够自动调整IFrame的高度，确保内容的完整显示。然后，我们将IFrame的高度设置为内容的高度，实现了自适应高度。首先，我们需要在HTML文件中添加一个IFrame元素，并为其设置一个唯一的ID，以便在JavaScript中使用。

使用H5新增MutationObserver，监听iframe的Url变化。

Just_Maybe的博客

11-06

3953

MutationObserver接口提供了监视对DOM树所做更改的能力，通俗点来说就是用来监视 DOM 变动，比如增加删除，浏览器窗口大小改变导致挤压DOM，属性的变动（width，height，src，style）、文本内容的变动等等。这里我只用来监听iframe的url变化，来进行操作代码： var target = document.getElementById("mainFrame"); // 目标节点iframe var MutationObserver = wind

js 监听一个元素大小发生变化

CycleByle的博客

01-25

1248

js 监听一个元素大小发生变化。

js监听iframe路由变化

10-13

在JavaScript中监听如果rame内的路由变化，通常需要利用一些技术手段，因为浏览器出于安全考虑不会直接暴露iframe内部的导航事件。一种常见的做法是使用postMessage API或者ContentWindow对象。这里简单介绍两种方法： **1. 使用postMessage：** - 在外层窗口（即包含iframe的页面）添加事件监听器，当iframe页面发送消息（例如更改路由时），可以接收到这个消息。 ```javascript window.addEventListener('message', function(event) { if (event.origin === 'your_iframe_url') { // 检查消息来源 if (event.data === 'routeChanged') { // 路由改变时携带的特定数据 console.log('Iframe route changed'); // 在这里处理路由变化的业务逻辑 } } }, false); ``` - 在iframe内，通过`window.parent.postMessage()`发送路线变化的信息。 ```javascript // 假设你在iframe的路由组件里有这个方法 function changeRoute(newRoute) { window.parent.postMessage('routeChanged', '*'); // 发送消息到父窗口 } ``` **2. 使用ContentWindow对象：** - 如果iframe的内容脚本支持，你可以获取到它的`contentWindow`属性，然后添加事件监听。 ```javascript const iframe = document.getElementById('your_iframe_id'); if (iframe.contentWindow) { iframe.contentWindow.addEventListener('hashchange', () => { console.log('Iframe route changed'); // 处理路由变化逻辑 }); } ``` 注意，以上方法并不保证在所有情况下都能工作，特别是跨域的iframe可能会受到限制。此外，由于iframe环境的隔离，你可能无法获取到完整的URL变化，只能依赖于传递的部分信息。在实际应用中，请根据具体情况调整并测试。