vue中如何通过iframe方式加载本地的vue页面

目录
  • 通过iframe方式加载本地的vue页面
    • iframe方式加载本地的vue页面的第一种方法
    • iframe方式加载本地的vue页面的第二种方法
    • iframe方式加载本地的vue页面的第三种方法
  • 关于iframe在vue中应用问题
    • iframe的宽高无法根据内容撑开

通过iframe方式加载本地的vue页面

也是在实际的项目中碰到一个奇葩的需求,用vue,居然还要用到iframe,真是脑壳大,试了好多次最后才找到了正确的方法。

总共有三种方法吧

iframe方式加载本地的vue页面的第一种方法

就是直接使用具体的页面地址:http://127.0.0.1:8080/Index

<iframe
  src="http://127.0.0.1:8080/Index"
  id="frames"
  frameborder="0"
  sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
  style="height: 100%; width: 100%"
></iframe>

iframe方式加载本地的vue页面的第二种方法

跟第一种方法类似,就是将127改为了localhost

<iframe
  src="http://localhost:8080/Index"
  id="frames"
  frameborder="0"
  sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
  style="height: 100%; width: 100%"
></iframe>

不过,注意一下,第一种和第二种方法只能在本地访问时生效,当打包部署到线上后,就会出现页面找不到的问题,不能部署那用处少了太多,这时要用第三种方法

iframe方式加载本地的vue页面的第三种方法

第三种方法跟页面中用相对路径引用图片的方式差不多,就是:…/index,这里的路径的路由中的路径

<iframe
  src="../index"
  id="frames"
  frameborder="0"
  sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
  style="height: 100%; width: 100%"
></iframe>
// 或者是像这样的路径
<iframe
  src="../#/index"
  id="frames"
  frameborder="0"
  sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
  style="height: 100%; width: 100%"
></iframe>

像第三种方法,就可以实现在打包部署在线上时,正确访问到相应的页面。

不过注意一下,当在本地打包成功后,在本地进行测试时,会出现嵌入的页面不是你想要的页面,而是自己项目的树形文件结构。

这是正常的,当部署到线上后,就是正常的页面啦

关于iframe在vue中应用问题

背景是一个vue3.0的个人博客,由于没有支持vue3.0的md展示手段(具体是vue-template-compiler版本太低目前最高2.6.12,而要求vue必须与其版本相同),所以我的解决方法是先将md文件转换成html文件然后由iframe直接导入页面。

iframe的宽高无法根据内容撑开

网上查阅了许多解决方法(其中多数是讲iframe自适应页面而非自适应内容),但基本思路都是***获取到iframe 内容的body宽高,重新赋值给iframe本身,但问题就出在***什么时候获取iframe宽高,vue的生命周期在iframe中完全失效,于是我的解决思路如下

首先利用点击文章列表这一过程,在每次点击后获取iframe body的宽高赋值给iframe本身

<iframe
 style="width: 100%; height: 100%"
 scrolling="no"
 class="iframe"
 :src="item.path"
 frameborder="0"
></iframe>

要强调的是一定是点击结束后,即新文章已经显示后才能后去到body的宽高

如果你也用了ui组件提供的click回调函数,并在其中做这件事,一定要使用this.$nextTick{}将你要做的事放到回调的最后执行

methods: {
//ui组件给的回调
   handleClick(tab, event) {
   //参数详见elemntui的tabs,这里只用到了tab.index获取点击文章的序号
     const oIframe = document.getElementsByClassName("el-tabs__content")[0]
       .children;
     const iframe = oIframe[tab.index].children[0].children[1].children[0];
     //以上都是找元素节点iframe的过程可忽略(因为用了v-for所以找起来会有点麻烦)
     this.$nextTick(function () {
       iframe.style.height =
         iframe.contentWindow.document.body.offsetHeight + "px";
         //contentWindow中有iframe对应网页的全部信息,包括windows、document等
     });
   },
 },

现在,点击文章列表的单个文章,文章的大小应该已经正常了,但页面首次加载时默认文章大小怎么办呢(我曾想过调用一次点击函数来模拟点击一次默认文章,但ui组件让我没有这个机会,后来想想这也确实不是什么好方法)

为了解决这个问题,我又重新回到vue的mounted的函数,但无论如何也获取不到body正确的高度,用this.$nextTick{}只会获取到最终iframe默认的宽高,这时vue的生命周期又失效了,为了找到这个时间点,只能再次求助原生的dom了

mounted() {
    const oIframe = document.getElementsByClassName("el-tabs__content")[0]
      .children;
    //该处dom操作的耦合性较高,待优化
    const iframe = oIframe[0].children[0].children[1].children[0];
    //以上都是找元素节点iframe的过程可忽略(因为用了v-for所以找起来会有点麻烦)
    this.$nextTick(function () {
      iframe.contentWindow.window.onload = () => {
        if (iframe.contentWindow.document.readyState == "complete") {
          iframe.style.height =
            iframe.contentWindow.document.body.offsetHeight + "px";
        }
      };
    });
  },

这个时间点很玄学,所以确切的说是点击文章列表后iframe完全加载完成后,才能获取到body的宽高,否则即使能够获取到body标签而且body内容都已加载完成,body的offsetHeight依然是0,最后我找到了iframe.contentWindow.document.readyState == "complete"这个代表iframe页面加载完成的标志,在其为”complete“后马上获取body的宽高,赋值,即可

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue中使用iframe踩坑问题记录 iframe+postMessage

    目录 使用iframe踩坑记录 iframe+postMessage 1.iframe的初始高度问题 2.postMessage的实现 iframe使用postMessage传值addEventListener未接收到却收到webpackwarning问题 bug如下 问题解决 使用iframe踩坑记录 iframe+postMessage 需求:最近在写一个博客的功能模块,技术栈是单独选择的vuepress,完成后想要融合到一个vue工程里,考虑到后期维护的问题,就通过iframe将vuepr

  • vue中iframe的使用及说明

    目录 关于iframe的使用 获取iframe里面的内容 CDM跨域 使用iframe的总结 代码展示 关于iframe的使用 iframe在同域时能自由操作iframe和父框架的内容(DOM),在跨域时可以实现页面跳转. <iframe id="iframe" :src="iframeSrc" style="height: calc(100% - 50px)" width="100%" frameborder=&quo

  • vue中使用iframe嵌入网页,页面可自适应问题

    目录 使用iframe嵌入网页,页面可自适应 vue iframe高度自适应 实用 实时刷新iframe高度变化 iframe高度有变的时候通知父级 iframe高度有变的时候直接修改iframe高度 使用iframe嵌入网页,页面可自适应 在项目中遇到要嵌入第三方网页的需求,因为没有同第三方页面交互的需求,只需展示即可,所以最终决定使用 iframe 将第三方的网页嵌入到系统中,并且做到自适应效果. 考虑到以后可能会增加嵌入页面的数量,故而封装成组件,供以后复用: 上图为系统整体结构图,需要在

  • vue与iframe之间的交互方式(一看就会)

    目录 vue与iframe之间的交互 子页面向父页面传值 父页面向子页面传值 vue与html之间iframe交互 1.父级调用子级ifram中的方法 2.子级iframe(html 或者vue)调用父级html中的方法 3.vue中调用子级iframe html 中的方法 4.在iframe中调用vue中的方法 vue与iframe之间的交互 首先介绍一下使用背景,前端采用html单页面引用vue的方式(逼不得已这么做,否则直接用vue不香嘛),废话不多说 页面大致是这样,现在需要做的是在if

  • vue中iframe使用以及结合postMessage实现跨域通信

    目录 使用场景 需求 iframe使用 基本使用 常用属性 iframe高度自适应 获取iframe的内容 同域下获取父级/子级内容 iframe跨域 postMessage通信 在vue中使用 使用场景 需求 在一个H5项目的页面中以url的方式嵌入另一个项目的页面.(不得不使用iframe) 而为了兼容移动端api(封装的一个移动端api,iframe内嵌页面不生效),需要实现父子页面的通信 (使用postMessage). iframe使用 基本使用 直接在页面嵌套iframe标签指定sr

  • vue中如何通过iframe方式加载本地的vue页面

    目录 通过iframe方式加载本地的vue页面 iframe方式加载本地的vue页面的第一种方法 iframe方式加载本地的vue页面的第二种方法 iframe方式加载本地的vue页面的第三种方法 关于iframe在vue中应用问题 iframe的宽高无法根据内容撑开 通过iframe方式加载本地的vue页面 也是在实际的项目中碰到一个奇葩的需求,用vue,居然还要用到iframe,真是脑壳大,试了好多次最后才找到了正确的方法. 总共有三种方法吧 iframe方式加载本地的vue页面的第一种方法

  • vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)

    在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如 <div class="#app"> <p>{{value.name}}</p> </div> 在加载的时候会看到 {{value.name}} 在页面出现,过了几秒之后才会渲染数据,在vue中有个指令可以解决这个问题,v-cloak 那么,v-cloak要放在什么位置呢,是不是每个需要渲染数据的标签都要添加这个指令,经过试验发现,v-cloak并不需要添加到每个标签,只要在el

  • js检测iframe是否加载完成的方法

    本文实例讲述了js检测iframe是否加载完成的方法.分享给大家供大家参考,具体如下: 这里是继上一篇<js实现iframe框架取值的方法(兼容IE,firefox,chrome等)>的扩展应用: 应用场景:iframe个人感觉最独特的应用之一就是配合P3P协议可以实现跨域写入cookie(好象除此之外,还没找到更有效的办法),但是有时候我们不知道这个iframe页面是否执行完毕,有没有办法判断iframe里的页面是否load完成了呢? iframe1.html: <html> &

  • iframe 异步加载技术及性能分析

    这是一篇原创翻译文章.原文地址. 我们会经常使用iframes来加载第三方的内容.广告或者插件.使用iframe是因为他可以和主页面并行加载,不会阻塞主页面.当然使用iframe也是有利有弊的:Steve Souders在他的blog里面有阐述:Using Iframes Sparingly: iframe会阻塞主页面的onload事件 主页面和iframe共享同一个连接池 阻塞主页面的onload是这两个问题中最影响性能的方面.一般都是想让onload时间越早触发越好,一方面是用户体验过更重要

  • vue中img src 动态加载本地json的图片路径写法

    目录: 注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里:否则json文件里的url地址找不到. major_info.json文件里的图片路径写法 页面通过v-bind的方式加载: PS:vue中图片src路径赋值 vue中引入static文件夹中图片,本以为src中直接写入图片所在路径即可,结果发现图片无法显示,控制台报404错误,图片无法找到.网上找到解决方案,在此mark一下,以便以后查询. 图片src路径动态赋值 <img class="thu

  • iOS开发中UIWebView的加载本地数据的三种方式

    UIWebView是IOS内置的浏览器,可以浏览网页,打开文档 html/htm pdf docx txt等格式的文件. safari浏览器就是通过UIWebView做的. 服务器将MIME的标识符等放入传送的数据中告诉浏览器使用那种插件读取相关文件. uiwebview加载各种本地文件(通过loadData方法): UIWebView加载内容的三种方式: 1 加载本地数据文件 指定文件的MIMEType 编码格式使用@"UTF-8" 2加载html字符串(可以加载全部或者部分html

  • vue中v-for加载本地静态图片方法

    vue-cli 项目中本地图片放在assets目录下(原因vue-cli最开始的vue图片就在里面,就把所有图片放在里面了): 之后v-for 动态加载图片路径就遇到了问题 源码: <ul> <li v-for="(item,index) in teamInfo" @click="trastFun(item)"> <div><img v-bind:src="item.imageurl"/></

  • React中Suspense及lazy()懒加载及代码分割原理和使用方式

    目录 React.lazy() 概括 为什么需要懒加载 如何进行代码分割 Suspense Suspense应用场景 Suspense实现原理 总结 Suspense和lazy()都是react中比较新的特性,在项目中使用还比较少,但是学习一下有助于在后面的项目中使用,同样可以一窥React未来的发展方向 React.lazy() 概括 顾名思义lazy()方法是用来对项目代码进行分割,懒加载用的.只有当组件被加载,内部的资源才会导入 为什么需要懒加载 在React的项目中import导入其他组

  • 浅谈VUE单页应用首屏加载速度优化方案

    单页应用会随着项目越大,导致首屏加载速度很慢!!!以下给出在下知道的几种优化方案 使用CDN资源,减小服务器带宽压力 路由懒加载 将一些静态js css放到其他地方(如OSS),减小服务器压力 按需加载三方资源,如iview,建议按需引入iview中的组件 使用nginx开启gzip减小网络传输的流量大小 webpack开启gzip压缩 若首屏为登录页,可以做成多入口,登录页单独分离为一个入口 使用CDN资源,减小服务器带宽压力 在index.html中引入cdn资源 ... <body> &

  • vue动态加载本地图片的处理方法

    发现问题 今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章. 通常,我们的一个img标签在html中是这么写的: <img src="../images/demo.png"> 这种写法只能引用相对路径下的图片.不能使用绝对路径.使用绝对路径的话,这类资源将会直接被拷贝,而不会经过 webpack 的处理. 如果src是变量的话,我们一般会在data中定一个变量src进行动态绑定. <img :src="src"> //data中

随机推荐