Vue中父级框架页调用子级框架页面中的方法

问题描述：项目中的h5有详情页，但是需求要有很多模板，之前是使用框架页面处理了，就是跳转到详情页，调接口将数据写到缓存中，再根据模板编号使用iframe打开对应的模板页面，在模板页面中直接读取缓存数据填充页面。问题来了，详情页中有图片的浏览插件ImagePreview，全屏状态下要控制返回按钮，如果图片是打开的要先关闭图片而不直接返回上个页面。

解决方法：直接贴代码了，父页面主要增加了vue钩子方法

  beforeRouteLeave(to, from, next) {
    var tempRet = showiframe.window.imageClose();
    if (tempRet == true) {
      window.history.pushState(null, null, document.URL);
      return;
    }
    next();
  },

子页面中的方法要全局声明，如果需要使用声明的变量的话，注意不能用this了。。。

created() {
    var that = this;
    window.imageClose = function() {
      if (that.instanceImage && that.instanceImage.opened == true)     
      {
        that.instanceImage.close();
        return true;
      }
      return false;
    };
  },

    clickjpImg(url) {
      var tempList = [];
      for (var i = 0; i < this.attachListForDemo.length; i++) {
        tempList.push(
          "https://app.xxx.com/" + this.attachListForDemo[i].ImageSrc
        );
      }
      this.instanceImage = ImagePreview(tempList);
    },

 

转载于:https://www.cnblogs.com/wangbg/p/11046349.html