您现在的位置是:首页 > Javascript
当前栏目
[javascript] vuejs的elementui实现父子iframe通信
2023-02-18 15:41:33 时间
当在后台界面使用iframe嵌套时 ,如果子iframe嵌套页想要点击一个连接 ,进行界面的刷新,就需要向父iframe传递信息 , 父iframe再去更新iframe的url
子iframe点击时调用openUrl方法 , 传递信息给父
<!-- 引入组件库 --> <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script> <script> new Vue({ el: '#toutiaolist', data: function () { return { fullscreenLoading:true, } }, methods: { openUrl: function (url) { var data={url:url}; window.parent.postMessage(data); }, }, created: function () { } }) </script>
父iframe接收到信息 , 更新iframe的url
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 引入组件库 --> <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script> <script> new Vue({ el: '#app', data: function () { return { iframeUrl: "index.php?r=media/weibolist", } }, methods: { openUrl: function (url,msg) { this.iframeUrl=url+"&time="+new Date().getTime(); }, }, created:function(){ let _this=this; window.addEventListener('message',function(e){ if(e.data.url){ _this.iframeUrl=e.data.url+"&time="+new Date().getTime(); } }); } }); </script>
主要靠这个
let _this=this; window.addEventListener('message',function(e){ if(e.data.url){ _this.iframeUrl=e.data.url+"&time="+new Date().getTime(); } });
相关文章
- [javascript] 获取当前时间日期和时间戳
- [前端系列] js获取秒级时间戳
- [前端系列] vue3和elementui使用recorder.js实现录音功能
- 实现网站在线客服系统代码过程中解决问题-js实现点击复制文本
- [转]ExtJs中使用中碰到的三个问题的解决方法
- [转]extjs 的权限问题。要求控制的对象是 菜单,按钮,URL
- [javascript] js格式化时间为xx秒前、xx分钟前、xx小时前等
- Extjs2.0之横向Radio经典布局(转)
- 关于ie的内存泄漏与javascript内存释放
- [PHP] laravel框架响应json信息中文禁止unicode编码
- [linux] Linux下格式化JSON程序-jq
- [javascript] js删除数组中的元素
- [linux] curl 命令post json数据
- [composer] composer.json autoload参数
- [composer] composer.json 中require和require-dev 的区别
- [PHP] composer init初始化composer.json文件
- [javascript] js websocket断线重连库ReconnectingWebSocket
- [javascript] 简单封装localStorge操作
- [javascript] vue中elementui 回车事件、获取焦点、按键等事件
- [javascript] js获取url中的get参数