应用场景 vue嵌套一个iframe，如果vue要监听iframe数值的变化，对其进行实时处理

最新推荐文章于 2024-08-03 15:19:05 发布
最新推荐文章于 2024-08-03 15:19:05 发布
阅读量3.1k 收藏 3
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012967454/article/details/103418394
版权

应用场景 vue嵌套一个iframe，如果vue要监听iframe某一数值的变化，从而进行相应处理
（应用原理是 iframe使用postMessage 解决跨域问题的相似原理）

vue
注册全局监听
注册
在iframe中 加载完成后 点击事件
在这里插入图片描述
在这里插入图片描述
子页面调用
在这里插入图片描述

为倒萨大味道
关注
专栏目录
vue 嵌套iframe并进行传值
这是我的博客
11-15 7668
子级iframe向vue父级传值： <template> <div> <iframe src="链接" ref="iframe"></iframe> </div> </template> 父级vue中mounted： mounted(){ 　window.addEventListener(...
vue页面中嵌入iframe外源地址页面 监听iframe 中事件
热门推荐
xinxin_zhu的博客
03-06 1万+
1.需求 vue中需要嵌入iframe 地址是第三方的 当iframeh中页面点击的时候.vue需要监控到这个事件将本页面关闭.代码中 js 发送和接收方法 //vue组件中是个弹框 <template> <el-dialog title="编辑" :visible.sync="editDialog" center :fullscreen="true" append-to-...
监听iframe的url变化，并且实现小程序关闭webView，跳转回小程序。
最新发布
Y1436314328的博客
08-03 488
业务场景是从A页面到B页面，B页面到C页面，C页面中使用iframe标签，然后在嵌套的第三方页面中完成操作后第三方使用返回B页面。我这里的A页面其实是小程序，小程序通过webView标签访问B页面。遇到的坑：当C页面返回到B页面时，要求点击触发回退时，返回到A页面。但实际效果是触发回退事件后，返回的是C页面中iframe嵌套的页面，而不是A页面。一直的思路是当C页面回到B页面后，清空路由栈，或者重定向页面，因为当没有路由记录后，回退就不会到在到iframe中展示的页面。因为一直不成功前置守卫，
vue中嵌套的iframe中控制路由的跳转及传参 （从iframe的嵌入的页面中跳转（穿透）到vue router 路由中）
qq_37672347的博客
11-18 9966
在iframe引入的页面中，通过事件触发的方式进行传递参数，其中data是一个标识符的作用，在main.js中通过data进行判断，params是要传递的参数 //iframe向vue传递跳转路由的参数 $('#serverIPanalysis').click(function(){ window.parent.postMessage({ data: 'haveparams', param...
vue点击弹窗里面嵌套ifream，监听ifream的数据
Abenazhan的博客
04-12 1321
被嵌套的ifream中 在ifream中点击的时候赋值。 <template> <div @click="dianji"> 11111 </div> </template> <script> export default { name: 'aa', mixins: [], data: function() { return { aacc: [], } },
利用iframe 监听页面宽度变化
Ms_alinda的博客
10-14 1216
????前情提要： 首先我的页面样式如上图，左侧菜单部分可以手动展开/收缩；所以会影响到右侧内容部分的宽度，我目前需要将按钮的地方固定在底部，由于采用了position: absolute;bottom: 0; 导致width不能继承到父元素的宽度，从而展示超出页面。 解决方案： 通过在内容区域 添加iframe ,通过监听iframe，在监听iframe发生变化后，获取内容区域宽度 赋值给 按钮区域。 上代码： <div id="page-wrapper"> ...
037：vue项目监听页面变化，动态设置iframe元素高度
大剑师兰特的GIS世界
09-21 1028
在vue项目开发中，有时候需要用到iframe。而iframe要正常显示，需要设定width和height。这里的示例是通过watch监听页面变化，可以动态的设置iframe元素高度。
021：vue中watch监听页面变化 动态设置iframe元素的高度
大剑师兰特的GIS世界
06-19 993
第021个vue项目中如何动态的设置iframe的高度的呢，这里主要用到了监听的功能，页面高度变化时，设定的动态高度也会相应的改变。
在vue中实现嵌套页面(iframe)
10-15
`iframe`允许我们在一个Vue应用中嵌入另一个独立的HTML文档，这对于展示第三方内容、实现某些特定功能或者处理复杂交互场景时非常有用。在Vue中使用`iframe`，我们可以直接在模板中插入`iframe`标签，并设置相应的...
vue 给iframe设置src_Vue 中嵌入 iframe 并进行双向通信的完整流程
weixin_39753791的博客
12-19 2073
背景Vue 应用中，需要使用 el-dialog 弹出一个 iframe 页面，该页面来源于其他项目，这就要解决 Vue 父页面和 iframe 子页面的两个通信问题：Vue 父页面向 iframe 子页面传递初始化数据子页面的关闭按钮，需要通知父页面关闭 el-dialog本文将整理 Vue 中嵌入 iframe 并进行双向通信的完整过程。子页面直接调用父页面方法的跨域问题理论上，如果 ifr...
vue项目嵌套（vue2嵌套vue3）
小王的技术库
06-27 5917
创建 template.vue 中间跳转页路由。 点击左侧菜单将符合条件的路由跳转到产品库。 template.vue 监听路由并更新产品库路由，同时传递用户登陆信息实现自动登陆 产品库获取登陆信息及路由信息进行模拟登陆操作。 产品库向产品测试进行通信 问题总结及解决方案 左侧菜单路由高亮状态 展示产品库页面时，对应左侧菜单路由要相应高亮选中。 在监听路由跳转时，判断当跳转产品库页面时，取 query 中的 path 字段为 url 做高亮处理。 产品测评面包屑导航页面路径 展示
捕捉IFrame SRC改变事件
04-30
页面中的使用到Iframe时，我们如何需要对IFrame中页面是否改变进行判断，我们可以使用到window.onbeforeunload事件.
vue中监听iframe页面中的值，并解决audio标签在谷歌不能自动播放的问题
L_eiDigaga的博客
11-27 2178
项目中有一个iframe引入的大屏页面，大屏页面会根据WebSocket后端返回的状态进行报警，但是这个audio标签在谷歌浏览器里不能自动播放，找了很多文章，绕不开这个限制，最后只能找一个折中的办法，将audio标签放在app.vue页面中，项目肯定要先登录了，就肯定要点击了，这样就有交互了，audio标签就能自动播放了。 这个是非父子组件之间交互使用的，习惯这样写 main.js里 Vue.prototype.ev=new Vue() 这个是app.vue页面，放了一个audio标签， <
vue中监听iframe的高度来实现自适应
在下魔王ii的博客
01-07 3275
在上一篇文章中说明了如何iframe的父子级之间如何传递信息，但是获取iframe子页面滚动高度的效果并不是很理想。 可能出现的问题： 1.特殊场景下会出现双重滚动条，影响体验 2.即时是加了setTimeout()定时器函数，有的时候也不能够取得准确的scrollHeight的值，例如iframe子页面有很多图片，图片加载过程就会影响到页面的高度。 优化： 考虑到上述问题，开始寻求其他方式来监听iframe子页面的滚动高度值。 经大神提点，建议在iframe子页面中监听整个页面容器的高度，类似
vue 页面嵌套iframe页面进行跳转
xiyuanoo的博客
02-06 1263
vue 嵌套iframe页面进行页面间跳转。以若依为例
判断Iframe是否加载完毕，加载完毕后对Iframe上的元素进行修改
weixin_43955340的博客
04-10 404
var oFrm = document.getElementById('Iframe4'); oFrm.onload = oFrm.onreadystatechange = function () { if (this.readyState && this.readyState != 'complete') { //alert("加载中。。。"); ...
vue 项目监听iframe传过来的信息
LZhizi的博客
07-12 1887
iframe 传递接收值
vue对嵌入的iframe进行操作记录
老衲的少女心i~
04-12 1477
在我们新的需求中，需要用到一个外部的界面用于实现数据可视化监控功能，通过嵌入外部的grafana界面实现。需要对这个iframe的url和内部DOM进行操作。iframe的url通过第一次进入界面，请求后端接口拿到。提示：以下是本篇文章正文内容，下面案例可供参考对嵌入的iframe进行操作总结，注意的是需要同源，不然拿不到里面的东西！！！
vue页面监听嵌套的iframe的滚动事件
05-25
要监听嵌套的iframe的滚动事件，你可以先通过JavaScript获取到嵌套的iframe元素，然后给它添加scroll事件监听器。但是需要注意的是，由于同源策略的限制，你只能监听和操作同源的iframe。 以下是一个示例代码： ``...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值