zoukankan      html  css  js  c++  java
  • 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);
        },
  • 相关阅读:
    ajax封装
    完美运动框架
    表单上传input=file
    面向对象入门
    浅谈javaScript内存
    关于使用iframe的父子页面进行简单的相互传值
    浅谈原生JavaScript的动画和特效
    rem 原理与简介
    移动 web 适配
    jsonp 简单封装
  • 原文地址:https://www.cnblogs.com/wangbg/p/11046349.html
Copyright © 2011-2022 走看看