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

这篇具有很好参考价值的文章主要介绍了【JavaScript】动态监听iframe高度以及监听iframe内部链接跳转。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

背景

实现方式

实现思路

实现代码

扩展场景

参考文档


背景

在日常开发中会遇到一种情况,就是页面需要嵌套iframe,由于iframe无法自适应里面样式高度,所以我们需要去监听iframe的动态高度

实现方式

MutationObserver

实现思路

  • 定义观察器MutationObserver
  • 监听iframe的contenWindow的DOMContentLoaded事件(当初始的 HTML 文档被完全加载和解析完成)
  • 当iframe的contentWindow.document.readyState 为interactive(代表文档已被解析,正在加载样式资源等等)开始监听 observer.observe(iframeEle.contentWindow.document, options);
  • iframe内部的dom动态更新,观察器捕获到dom变化,此时可以拿到contentWindow.document.body.scrollHeight,给外层的iframe元素赋值高度

实现代码

话不多说,直接上代码

需要监听的iframe

<iframe id="iframeId" src="xxxxx"></iframe>
let iframeEle = document.getElementById('iframeId');

// 配置监听方法的属性值
const options = {
    "childList" : true,
    "attributes" : false,
    "characterData" : false,
    "subtree" : true,
    "attributeOldValue" : false,
    "characterDataOldValue" : false
};
// 定义一个监听器
var observer = new MutationObserver((mutations) => {
      let is_dom_change = false;
      mutations.forEach((item) => {
        if (item.type === 'childList') {
          is_dom_change = true;
        }
      });
      const scrollHeight = iframeEle.contentWindow.document.body.scrollHeight;
      if (is_dom_change) {
        iframeEle.style.height = `${scrollHeight}px`;
      }
});


iframeEle.contentWindow.addEventListener('DOMContentLoaded', function(e) {
    try {
        if (iframeEle.contentWindow.document.readyState === "interactive") {
            // 传入监听的dom,以及配置
            observer.observe(iframeEle.contentWindow.document, options);
        }
    } catch (err) {}
});

扩展场景

当iframe内部链接发生变化,或者是后端或者网关重定向页面,如何去获取最新的iframe里面的href?

有人可能会说用onload方法,例如

<iframe onload="handleOnload" id="iframeId"></iframe>

<script>
handleOnload(e) {
    console.log('触发了onload事件');
}
</script>

但实际使用就会发现,在某些特定的时刻iframe的onload事件只会触发一次。

对此我们可以去监听iframe的load方法,并且在iframe第一次加载完之后开始监听,保证代码的健壮性

let iframeId = document.getElementById("iframeId")


iframeEle.contentWindow.addEventListener('DOMContentLoaded', function(e) {
    try {
        if (iframeEle.contentWindow.document.readyState === "interactive") {
            iframeId.addEventListener("load", function(e) {
                // 拿到iframe内部最新的href
                console.log(iframe.contentWindow.location.href)						
            });
        }
    } catch (err) {}
});

参考文档

《DOMContentLoaded - Web API 接口参考 | MDN》

《document.readyState - Web API 接口参考 | MDN》

《MutationObserver - Web API 接口参考 | MDN》文章来源地址https://www.toymoban.com/news/detail-470125.html

到了这里,关于【JavaScript】动态监听iframe高度以及监听iframe内部链接跳转的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Java项目】使用Nacos实现动态线程池技术以及Nacos配置文件更新监听事件

    真诚的希望能给我项目一个stars!!! 项目源码 项目视频演示 线程池(Thread Pool)是一种基于池化思想管理线程的工具,经常出现在多线程服务器中,如Tomcat。 线程过多会带来额外的开销,其中包括创建销毁线程的开销、调度线程的开销等等,同时也降低了计算机的整体性

    2024年02月09日
    浏览(39)
  • echarts图表动态监听dataZoom滑动,控制柱条的宽度以及数值的显示隐藏

    当数值过多时,显示所有柱条看着会很凌乱且文字会挤在一起,于是就需要监听datazoom的滑动,拿到对应的阈值后做出相应的配置。 “ dataZoom ” 事件通常用于响应用户对图表进行数据缩放的操作。 这里是datazoom官网api地址:点击跳转至官网文档的datazoom介绍 初始时 状态如下

    2024年04月13日
    浏览(47)
  • iframe内嵌链接常见问题

    问题1:   Refused to display \\\'http://localhost:8080/xxx\\\'  in a frame because it set \\\'X-Frame-Options\\\' to \\\'sameorigin\\\' 出现原因 :X-Frame-Options 响应头表示浏览器是否允许一个页面在  frame、iframe、embed 、object 标签中显示。站点维护人员可以通过设置该请求头确保自己的网站没有被嵌入到别人的网站

    2024年02月06日
    浏览(45)
  • vue如何实现实时监听页面宽度高度变化

    运用的主要技术:watch监听 话不多说直接上代码,自行研究

    2024年02月11日
    浏览(44)
  • Unity 事件监听与广播(高度解耦合,观察者模式)

    使用观察者模式降低模块间的耦合性 通过C# 的 Dictionary 存放事件码和事件的委托 添加事件: 判断字典是否有该事件码,没有添加 判断当前委托类型与添加的事件码的类型是否一致 最后订阅该事件 移除事件: 先判断事件码是否存在 取消订阅 最后判断事件码是否为空,是

    2024年02月12日
    浏览(47)
  • 运行QT的.exe程序出现缺少动态链接库以及无法定位程序输入点的两种不同情况的解决办法

    一、出现无法定位程序输入点的错误 出现这种情况是因为下面的设置造成的 因为QtCreator的环境变量在mingw环境变量的上方造成的。 具体解决办法是将上面的环境变量下移即可。 至于为什么会这样,可以自行查找啦。 二、出现缺少动态链接库dll的错误 在加入mingw-64的环境变量

    2024年02月04日
    浏览(46)
  • 微信小程序使用weapp-qrcode.js生成二维码以及“扫普通链接二维码打开小程序”动态传递参数实现以及遇到问题记录

    参考文章原文链接:微信小程序使用weapp-qrcode.js完成二维码的生成_fairy_404的博客-CSDN博客 首先给需要生成二维码的页面创建一个canvas 因为我这里实现的是弹窗展示二维码,所有就把 canvas移出页面,小伙伴们根据自己需求进行调整,weapp-qrcode.js内容参考链接中就有,我这里就

    2024年02月01日
    浏览(57)
  • uniapp 小程序 监听数据渲染完毕 获取高度 滚动条滚动到最底部

    nextTick : 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。 滚动条用的scroll-view标签 写一个聊天项目 实现发送消息、进入页面滚动到最底部 滚动方法pageScrollTo总是在渲染前执行 导致无法滚动到最底部 数据渲染完成获取元素

    2024年02月11日
    浏览(38)
  • 微信小程序使用weapp-qrcode.js生成二维码以及“扫普通链接二维码打开小程序”动态传递参数实现记录

    参考文章原文链接:微信小程序使用weapp-qrcode.js完成二维码的生成_fairy_404的博客-CSDN博客 首先给需要生成二维码的页面创建一个canvas 因为我这里实现的是弹窗展示二维码,所有就把 canvas移出页面,小伙伴们根据自己需求进行调整,weapp-qrcode.js内容参考链接中就有,我这里就

    2024年02月15日
    浏览(53)
  • 浅谈 iframe的优缺点以及使用场景

    提示:以下是本篇文章正文内容 iframe 是嵌入式框架,是 HTML框架 ,还是一个 内联元素 ,iframe元素会创建包含另一个文档的内联框架(行内框架),说白了就是,iframe用来在页面嵌入其他的页面。 通常我们使用iframe直接在页面嵌套iframe标签指定src就可以了。 iframe能够把嵌入

    2024年02月05日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包