精华内容
下载资源
问答
  • vue中iframe高度自适应 ```javascript <template> <div class="home"> <iframe src="" :height="iframeH" width="100%" frameborder="0" v-resize="res"></iframe> </div> </...

    vue中iframe高度自适应

    
    ```javascript
    <template>
      <div class="home">
        <iframe src="" :height="iframeH" width="100%" frameborder="0" v-resize="res"></iframe>
      </div>
    </template>
    
    <script>
      export default {
        name: "Home",
        components: {
    
        },
        data() {
          return {
            iframeH: 150,
          }
        },
        directives: {
          resize: {
            bind(el, binding) {
              let height = ''
              let flag = true;
    
              function get() {
                let ch = el.contentWindow.document.getElementById('app').scrollHeight;
                if (height != ch) {
                  if (height != '') {
                    if (flag) {
                      flag = false;
                      binding.value({
                        ch
                      })
                      flag = true
                    }
                  }
                  height = ch;
                }
              }
              el._vueReize_ = setInterval(get, 500)
            },
            unbind(el) {
              clearInterval(el._vueReize_)
            }
          }
        },
        methods: {
          res(val) {
            this.iframeH = val.ch
          }
        }
      };
    
    </script>
    
    
    
    展开全文
  • vue中iframe的使用导致IOS页面触发事件无效(移动端) 1、◎◎◎◎◎◎◎◎◎◎ 页面描述 及 示意图 ◎◎◎◎◎◎◎◎◎◎ 页面布局是:标题 和 内容区 标题:返回键是定位的(定不定位与该问题无关紧要) 内容...

    vue中iframe的使用导致IOS设备中触发事件无效

    1、◎◎◎◎◎◎◎◎◎◎ 页面描述 及 示意图 ◎◎◎◎◎◎◎◎◎◎

    页面布局是:标题 和 内容区
    标题:返回键是定位的(定不定位与该问题无关紧要)
    内容:父容器包含了iframe标签。该iframe是用原生js 动态创建 并追加给了父容器在这里插入图片描述

    2、◎◎◎◎◎◎◎◎◎◎ 问题描述 ◎◎◎◎◎◎◎◎◎◎

    	安卓手机没毛病,IOS出现以下问题:
    	
    		如果iframe加载出来的内容超过了分辨率的宽,滑动页面 、点击返回 、 返回无效 ( !~ ~ )
    
    		网上的资料大部分是给父盒子 如下图的样式,然而也无济于事。
    
    		怀疑过——> 定位问题导致的?   后台提供的url 没自己适配好移动端?   滑动页面的时候头部跟着滑跑了?
    
    		其实是高度没给够,内容把父盒子的宽撑大了,在滑动的时候影响了头部。(也就是移动端页面显示的是PC页面)
    
    .parentBox{
    	...
    	-webkit-overflow-scrolling:touch;
    	overflow:scroll;
    }
    

    ps. 历经三天,最终搞定。重点来了 …

    3、◎◎◎◎◎◎◎◎◎◎ 解决办法 (直接上代码) ◎◎◎◎◎◎◎◎◎◎

    var myiframe = document.createElement('iframe'),
     	parent = document.getElementById('fileContent');
        myiframe.setAttribute("src", url);//填写你的url
        myiframe.setAttribute("width", '100%');
        myiframe.setAttribute("overflow", 'visible');
        myiframe.setAttribute("frameBorder", '0');
        //如此设置是为了 确保body的宽是 等于 设备分辨率的。 上面的示意图,从陈列的3个 sheet 可以看出出现bug是因为该文件是按照pc窗口加载的,其内容大小超过父元素的宽,在滑动过程文件容易乱跳,遮住了头部,导致出发头部的返回键时不管用,或是触发好多次才执行。 所以这里修改bug的方向一定与width 有关了。(此处很重要)
        document.getElementsByTagName("body")[0].style.width = window.screen.width;
        //给iframe的高设置成全文的高,并把头部的高度减去
        myiframe.setAttribute("height", that.$refs.asideBoxEle.scrollHeight - 44 + 'px');
        //onload方法 ,是iframe加载完以后执行的回调  我是没看到w3c 中写
        myiframe.onLoad = that.iframeOnload()
        parent.appendChild(myiframe);
    
    iframeOnload(){//因为安卓没问题,所以该回调只用来处理IOS设备,
       let u = navigator.userAgent
       let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
       if (isiOS) {//解决返回键失效的问题
         // 监听body的touchmove事件,阻止默认行为。因为当滑动文件内容以后返回,会使上一个页面的触发事件不执行
         document.body.addEventListener('touchmove',this.bodyScroll,false);
       }
    }
    
    Created with Raphaël 2.2.0 开始 然而,问题来了。
    Created with Raphaël 2.2.0 开始 取消了默认行为 , 返回以后影响到了上一层页面的滑动事件,于是我们需要中断 取消默认行为。
    let u = navigator.userAgent
    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
    if (isiOS) {//解决iframe父亲页滚动失效的问题
      document.body.removeEventListener('touchmove',this.bodyScroll,false);
    }
    
    //有同学会问,为什么要把下面这个函数 提取? 
    //回答:是因为w3c规定 如果要移除事件句柄,addEventListener() 的执行函数必须使用外部函数,否则无效。(海燕啊,你可长点心吧。)
    bodyScroll(event){
        event.preventDefault();
    }
    

    w3c规定 removeEventListener 。

    4、◎◎◎◎◎◎◎◎◎◎ 还需要知道 ◎◎◎◎◎◎◎◎◎◎

    	a、为什么要动态创建iframe?
    	   回答:跟着业务需求走吧(我这边是因为关闭该页面,重新选一个文件预览时,该文件在加载之前会显示上一个文件的内容,为了删除上一个文件的展示 原生删除不了vue里写好的元素,只能通过js删除js动态创建的元素。)
    

    ps. 谢谢浏览,愿能帮助到你!

    展开全文
  • vue中iframe子页面和父页面之间相互通信 问题 在实际的开发遇到一个需求,就是iframe子页面需要调用父页面的方法,起初百度使用了*window.parent.vm*来调用父页面的方法,后来发现在iframe的纯html页面根本取不...

    vue中iframe子页面和父页面之间相互通信

    问题

    在实际的开发中遇到一个需求,就是iframe子页面需要调用父页面的方法,起初百度使用了window.parent.vm*来调用父页面的方法,后来发现在iframe的纯html页面中根本取不到vm,遂推测应该是两个vue工程页面之间的调用可以用这个;接着又使用了window.parent.getElementId(‘xxx’),这种方法理论上来说应该是可行的,但是我懒且不喜欢这种调用方式,就没有深究,放弃了这种方法的尝试。所以找到了postMessage这种方法,感觉还不错,就选择了这个。

    解决方法

    postMessage的使用还是很简单的,也能够实现跨域间的通信,感觉很好用,下面就是使用方法:
    发送端

    window.parent.postMessage(data, '*');
    

    “*”代表所有的地址都能接收到信息,这个地方其实是目标路径,可以根据自己的实际路径进行更改;这里有一块需要注意的地方,在第一次使用的时候,我使用了window.postMessage,但不知道什么原因,接收不到信息,改为window.parent.postMessage之后就可以了;
    接收端:

    window.addEventListener('message', (ev) => {
            var data = ev.data;
    	        //下面可以调用我们html页面js中的方法,使用传递的数据进 行操作了
    	        console.log(data);
    	}, false);
    

    接收端比较明朗了,就是监听message字段,消息发送成功后触发此事件,进而进行具体方法的执行。

    展开全文
  • vue中 iframe 引入 本地静态html文件,vue-cli2与vue-cli3引用的差异。引言Vue-cli 2.0 构建的项目引用Vue-cli 3.0 构建的项目引用不考虑项目构建版本的方法1.如果你是webpack工程师,你就自己配置打包方式。2.使用...

    引言

      在写个人网站的时候,需要用到 iframe 引用本地静态的 html 文件,发现引用方式的一些差异,在此分享一下。

    Vue-cli 2.0 构建的项目引用

    在vue-cli 2.0 构建的项目中,如果要使用 iframe 引用本地的静态 html 文件,静态文件需要放置在和 src 同级的文件加夹 static 中。
    如下图:
    在这里插入图片描述
    在使用 iframe 的地方直接写 “相对路径” 就行,如下图:
    在这里插入图片描述
    这里还是需要解释一下,这里的路径,在打包后不会变化。都是根据打包后的路径查找静态文件,因此上方用 “相对路径” 描述并不准确,而是打包后的 “相对路径”,看下图就明白了。

    这是 打包后的文件层级关系
    打包后的文件层级关系
    这里我写了很多 ../../../,最后发现真实的引用路径还是 http://localhost:8080/static/blog.html,因为向上查找已经到根目录了,所以不管写多少个../,实际路径还是http://localhost:8080/static/blog.html,因此 下方路径直接写 ./static/blog.html 也是一样的,根据上方打包后的层级关系对照一下就明白了。
    在这里插入图片描述

    Vue-cli 3.0 构建的项目引用

    在Vue-cli 3.0 构建的项目中使用 iframe 引用本地静态 html 文件,和 2.0基本一样,唯一的区别在于,静态html 文件不是放置在 src 同级的文件夹中,而是放在 public 文件夹下。
    如下图:
    在这里插入图片描述
    当然,也可以不用放在 static 文件夹下。public 文件下的文件(包括文件夹),打包后的层级不会发生变化,因此可以自定义名称。
    不能改变的是,只能放在public 文件夹下。

    其它注意点与Vue-cli 2.0 构建的项目相同,就不一一赘述。

    那有没有随意放在其它层级还能使用的方法,而且不需要考虑Vue-cli 2.0 还是 3.0 构建的项目,其实也是有的。


    不考虑项目构建版本的方法

    1.如果你是webpack工程师,你就自己配置打包方式。

    好吧,这是废话

    2.使用require() 引入

    html 文件我放在和 vue 文件同级,如下:
    在这里插入图片描述
    Home.vue 中这样写

    <template>
      <div class="home">
        <button @click="clickHandle">switch</button>
        <iframe ref="iframe" frameborder="0" v-if="ifIframe"></iframe>
      </div>
    </template>
    
    export default {
      name: "Home",
      data() {
        return {
          ifIframe: true,
          iframeData: require("./blog.html")
          // src: "./static/blog.html"
        };
      },
      mounted() {
        this.$refs.iframe.contentDocument.documentElement.innerHTML = this.iframeData;
      },
      methods: {
        clickHandle() {
          // 1.通过DOM操作切换数据源信息
          // 因可能在iframe内部点击了外链信息,src会发生改变,可能就不属于同源。不同源外部就无法操作iframe内部DOM,因此使用v-if 删除DOM后再显示清空src信息
          // 也可以使用其他方式清除,比如用v-bind 绑定src
          // this.ifIframe = false;
    
          this.$refs.iframe.removeAttribute("src");
    
          this.$nextTick(() => {
            // this.ifIframe = true;
            this.$nextTick(() => {
              this.$refs.iframe.contentDocument.documentElement.innerHTML = require("./second.html");
            });
          });
    
          // 2.切换路径促使切换数据
          // this.src = "./static/second.html";
        }
      }
    };
    

    上面就是通过 require() 获取到文件,再给 iframecontentDocument.documentElement.innerHTML 赋值。

    这种方式有一点问题就是,不同源的 iframe 无法操作内部 Dom 信息,所以可以使用 removeAttribute 删除 src 再赋值,上方code 中也有描述。

    使用这种方式还需要安装html-loader 插件,不然require() 引入的文件无法解析。

    使用命令安装:

    npm i html-loader --save-dev
    

    再在 vue.config.js 配置,没有这个文件的就自己新建一个,放在最外层。

    module.exports = {
      chainWebpack: config => {
        config.module
          .rule("html")
          .test(/\.html$/)
          .use("html-loader")
          .loader("html-loader");
      }
    };
    

    总结

    好了,以上就是在vue 项目使用iframe 引用 本地静态 html 文件的方法。

    为了大家更加实际的体会,上方的两个例子写了一个demo 上传到github上了,上面看不懂的,可以直接下载例子参考。

    vue-cli2.0 构建的项目使用iframe 引用本地静态html文件的demo
    vue-cli3.0 构建的项目使用iframe 引用本地静态html文件的demo

    展开全文
  • Vue iframe 的高度自适应

    万次阅读 2019-04-28 18:13:17
    iframe引入报表,高度的自适应。 <template> <div style="height:auto;"> <iframe style="width:100%;height:100%;" :src="bdTokenUrl" frameborder="0" scrolling="no" id="bdIframe"> <...
  • iframe @load="loadMethod" :src="url"></iframe> <br> <button @click="changeSrc">改变iframe的src为网址,会触发load事件</button> <br> <button @click="changeSrcDown...
  • 兼容 IE11+ && other 1 主要使用方法 window.otherWindow.postMessage(data,orign) 1 ... 参数说明: data: 发送的数据。接受范围:字符串、数字、...orign:接收消息的域名,比如页面存在多个iframe,可以通过设
  • 需求:在一个H5项目的页面以url的方式嵌入另一个项目的页面。(不得不使用iframe) 而为了兼容移动端api(封装的一个移动端api,iframe内嵌页面不生效),需要实现父子页面的通信 (使用postMessage)。 iframe...
  • 由于 iframe 的内容加载较慢,需要在加载完成前添加 loading 效果。 本文 loading 使用的是 Element 框架的加载(Loading)组件。 功能实现完整代码 <template> <div style="height:1000px;" v-loading=...
  • 子页面代码 second page name: vue父页面代码 //当src改变的时候需要监听一下iframe加载进度,当iframe加载完成后才能传递数据

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,731
精华内容 4,292
关键字:

vue中iframe

vue 订阅