zoukankan      html  css  js  c++  java
  • vue中嵌套的iframe中控制路由的跳转及传参

    在iframe引入的页面中,通过事件触发的方式进行传递参数,其中data是一个标识符的作用,在main.js中通过data进行判断,params是要传递的参数

    //iframe向vue传递跳转路由的参数
        $('#serverIPanalysis').click(function(){
            window.parent.postMessage({ data:"haveparams",params:'aaaaaa' },'*');
        })

    在vue项目的main.js中,在页面加载的时候会触发一次message事件,所以要通过标识符判断来进行参数的接受,不然直接触发就会报错,在事件对象中有事件的信息,其中就包括iframe中的页面传递过来的参数,通过对象结构取出参数,在进行跳转的设置

    //iframe中控制路由的变化
    function receiveMessageFromIframePage (event) {
      // console.log(event.data,event)
      if (event.data.data.includes('haveparams')) {
        var id = event.data.params
        router.push({name: 'customerlist1',params:{id}})
      } else if (event.data.data.includes('noparams')) {
        router.push({name: 'customerlist1'})
      }
     }
     
     window.addEventListener("message", receiveMessageFromIframePage, false);
  • 相关阅读:
    Xcode-调试断点不能停在代码区终极解决方案
    iOS-修改Status Bar
    iOS-appStore发布流程
    iOS-Debug调试
    iOS-项目搭建
    iOS-UIButton-设置button标题和图片位置
    iOS-布局-Masonry-优先级
    intent 传参数
    五大布局
    execute、executeQuery和executeUpdate之间的区别
  • 原文地址:https://www.cnblogs.com/wyongz/p/11727849.html
Copyright © 2011-2022 走看看