在vue中实现嵌套页面(iframe)

vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径,也可使用服务器根路径http:localhost:8088/…

<iframe src="../../static/plusPro.html" width="1200" height="300" frameborder="0" scrolling="auto"style="position:absolute;top: -300px;left: 0px;"></iframe>

补充知识:关于VUE嵌套iframe的一系列问题

此文是建立在vue-cli之上 ,当然单写也可以,下文会涉及一些关于cli的知识,单写的请忽略;

最近有很多小伙伴问超哥关于vue中嵌套iframe一些问题。

犹豫本尊最近转型了react,关于vue的问题以后会在csdn发表博客。

废话不多说,直接进入正题;

本尊并不建议vue嵌套iframe,当然会有那些个比较恶心的需求,例如在读的小伙伴。

申明:本尊在iframe页面写入的是JQ,因为和VUE没有特别大的牵连,所以直接操作dom了,如果有同学依然想在iframe页面中也是可以的,只需把本尊的代码copy copy copy,然后在改吧改吧就OK了。

问题 1 (go back)

例如:在iframe页面中有诸多跳转,当完成玩iframe页面中一些操作时,此时点击浏览器的回退功能,那么恭喜你中奖了,你回退的是iframe页面,并无法回退和iframe无关联的vue页面,一直点击浏览器的回退,可能会一直重复iframe连接的几个页面,或直接404,或空白。

解决办法:使用H5的history对象。

code:

  $(document).ready(function(e) {
    var counter = 0;
    if (window.history && window.history.pushState) {
       $(window).on('popstate', function () {
            window.history.pushState('forward', null, '#');
            window.history.forward(1);
            window.parent.location.hash='/newActivity';//这里写你自己要回退的路径
        });
     }

     window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
     window.history.forward(1);
  });

介绍:

popstate:每当同一个文档的浏览历史(即history对象)出现变化时,就会触发popstate事件。

forward:移动到下一个访问页面,等同于浏览器的前进键。

其他的没啥了吧,相信大家也都能看懂,其实只需copy copy copy;

问题 2 (iframe中的请求);

关于请求其实没啥要说的,但是还是有人会问,既然问了那就顺便说一下吧。

例如:有一个活动详情页面iframe,活动 列表是vue层,点击活动列表某一项跳详情,此时请求接口,地址栏带参数,像这种页面一般在iframe页面请求的接口中,最主要的参数就是活动ID,当然不排除你们公司有个奇葩后台,或者刚从某培训机构培训出来的所谓大牛,以此类推,参数继续带过来。

code:

function PcCommon(){
 this.baseUrl='https://xxxxxxx';这里写你的基址路径
}
PcCommon.prototype={
 GetQueryString: function(name) {
 return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
 },//获取地址栏参数
 ajaxPost:function(){
 $.ajax({
  url:this.baseUrl+url+signParam(),
  type:'POST',
  async:true,
  data:JSON.stringify(data),
  dataType:'json',
  headers:{
  "Authorization":getCookie('token'),
  "Content-Type":"application/json;charset=UTF-8"
  },
  success:function(res){
  if(typeof success == 'function'){
   success(res)
  }
  }
 })
 },//二次分装ajax
 goTop:function(id){
 var num = $('.'+id).offset().top+125+'px';
 $('html,body', window.parent.document).animate({scrollTop: num }, 500);
 }//分装的滚动,白送
}

这是本尊写的一个简单的base.js就是原生的面向对象。

写到基址路径的时候这里还真有必要说一下这个请求。

首先vue打包的时候并不会把iframe中的html打包进去,所以当初你在main.js中设置的那些基址以及common是不能用的,所以base.js才产生了基址路径,当然你准备部署的时候一定要记得改掉你的基址路径,建议,最好写两个,一个注释,一个打开,也挺方便,一目了然;

接下来是调用,上代码;

code:

var newHd=new PcCommon();
 var actStage=newHd.GetQueryString('actStage');//获取iframe地址栏参数实例
 var actId=newHd.GetQueryString('actId');//获取活动ID
 newHd.baseUrl = 'http://192.168.0.13:7500/';//更改你的基址路径,上线的时候直接注释掉就OK

$('.confirm_simne_btn').on('click',function(){
 var that=this;
 newHd.ajaxPost(
  '/activity/v1/invitation/claimPrize',
  {
  activityId:actId,
  prizeLevel:id
  },
  function(res){
  console.log(res)
        //直接写你的操作就OK
  }
 )
 })

就个简单的ajax请求,真没啥要说,不过刚刚在写文的过程中又想起一些知识点,继续下文。

问题 3(由问题2引发===>关于目录)

npm run build 相信这条命令是干啥的大家都清楚,会生成一个dist文件,在这里我不批判他人,只说我的做法;

例如:还是拿活动举例,活动列表下有诸多个不同的template,犹豫打包并不会把iframe文件打包进去,所以我直接把他放在dist文件下,发布的时候直接打包dist。

直接上图:

简单的介绍一下,dist不用多说了,static以及index.html也不用说了,最主要的看newAct这个夹子,这个夹子就是你们所谓的活动夹子,里面有public和view,public主要放的一些公共的css、js、以及第三方包。view里面就是各个活动的夹子,例如duyuesheng这个夹子,就和你正常写H5一样,里面 有js、css,这些你们就随意发挥吧。

就先介绍到这里?

还有在iframe中操作vue的方法,在firame中跳转到vue指定的路径....问题有很多,也不是一句两句能说清楚的,关键没个很好的例子给大家演示,就这样吧,有不懂的可以留言或者私密我....

此文写给那些需要的人看,不喜勿喷!!希望能给大家一个参考,也希望大家多多支持我们!

(0)

相关推荐

  • vue与iframe之间的信息交互的实现

    说一下我的使用场景:在vue中使用百度地图,需要使用离线地图 先上代码 然后细细品 第一张图 第二张图 第三张图 1.首先iframe 引入你要嵌套的地址 2 .通过vue中给出的ref 来获取 ifarme的DOM元素 如图中的 this.iframeWin = this.$refs.iframe.contentWindow [拿到iframe的window对象] 3.vue如何向iframe内传送信息 可以通过H5新属性 postmessage 注释:[postMessage是有点类似于UD

  • vue使用facebook twitter分享示例

    记录一次vue使用分享 固定内容的分享 参考文档 facebook 分享文档 twitter 分享文档 vue 使用 facebook 使用分享 找到index.html 添加一下代码 <!-- facebook 分享 --> <div id="fb-root"></div> <script>(function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.g

  • 解决vue单页面多个组件嵌套监听浏览器窗口变化问题

    需求 最近公司有个大屏展示项目(如下图) 页面的元素需要做响应式监听,图表需要跟着窗口响应变化 问题 每一个图表都被我写成了一个组件,然后就在每一个组件里写了一串代码,监听浏览器变化 结果只有父组件的代码生效 mounted(){ window.onresize = () => { //当窗口发生改变时触发 // }; } 原因 经简单测试后发现,同一个路由页面只能注册一次浏览器窗口监听事件,第二次注册的会覆盖第一次注册 下边代码即可测试 mounted(){ window.onresize =

  • Vue 嵌套路由使用总结(推荐)

    开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https://nodejs.org/en/ 需求场景 如下图,我们希望点击导航栏不同菜单时,导航栏下方加载不同的组件,进而展示不同的页面内容 解决方案 使用动态路由 新建home.vue作为子页面组件 <template> <div> <h3>home Page</h3> <p>home page content</p> </div> <

  • 在vue中实现嵌套页面(iframe)

    vue中嵌套iframe,将要嵌套的文件放在static下面.src可以使用相对路径,也可使用服务器根路径http:localhost:8088/- <iframe src="../../static/plusPro.html" width="1200" height="300" frameborder="0" scrolling="auto"style="position:absolute

  • 在vue中实现简单页面逆传值的方法

    [需求] 要实现的需求很简单,页面从A -> B,用户在B触发操作,将一些数据带回到A页面,在网上找了好久也只看到有人问,但总找不到很好答案.要实现的效果图如下: [联想] 在 ios 开发中,页面跳转 A -> B -> C,到 C 页面后,内存中一直存储着 A 和 B 页面的数据和状态,通过导航堆栈遍历数组可以拿到之前的页面进行修改赋值等,另外还有代理,block传值等操作. vue是一个单页应用,轻量,并且不会重复下载数据.当它从一个页面跳转到另一个页面时,原来的页面的vue实例和

  • 如何管理Vue中的缓存页面

    <keep-alive> <router-view /> </keep-alive> Vue中内置的<keep-alive>组件可以帮助我们在开发SPA应用时,通过把全部路由页面进行缓存(当然也可以有针对性的缓存部分页面),显著提高页面二次访问速度,但是也给我们在某些场景带来了困扰,其中包含两个主要矛盾: 缓存页面如何在合适的时机被销毁 (keep-alive组件提供了三个参数来动态配置缓存状态,但是作用有限,后面分析) 同一个路径如何缓存多个不同的页面(同

  • vue中SPA单页面应用程序详解

    一.SPA的概述 SPA(single page application)单页面应用程序,在一个完成的应用或者站点中,只有一个完整的html页面,这个页面有一个容器,可以把需要加载的代码片段插入到该容器中. SPA的工作原理: eg:  http://127.0.0.1/index.html#/start ①根据地址栏中url解析完整的页面:index.html 加载index.html ②根据地址栏中url解析#后的路由地址: start 根据路由地址,去在当前应用的配置中 找该路由地址的配置

  • vue中beforeRouteLeave实现页面回退不刷新的示例代码

    路由切换返回前一个路由时实现页面不刷新功能,首先想到的是keep-alive,但是页面不属于父子级关系,所以决定用beforeRouteLeave,下面贴代码 beforeRouteLeave(to, from, next){ if(to.name !== 'page2'){ //判断是从哪个路由过来的,如果不是page2过来的需要做什么操作在这里实现 //如果是page2过来的,表明当前页面不需要刷新获取新数据,直接用之前缓存的数据即可 } next(); } beforeRouteLeave

  • vue中内嵌iframe的src更新页面未刷新问题及解决

    目录 vue内嵌iframe的src更新页面未刷新 原因 解决 iframe的src指向的内容不刷新的解决方法之一 总结 vue内嵌iframe的src更新页面未刷新 vue中,系统使用iframe内嵌了其他系统的页面,iframe的src修改了,但是iframe内部页面内容未更新,也未请求接口. 原因 iframe的src中如果带hash #,src改变是不会刷新的. 解决 方式一:可以在 # 号前加一个随机数或者时间戳,但这种方式会改变url:方式二:在组件上加key,强制刷新页面. 方式一

  • vue 使用vuex在页面跳转的实现方式

    目录 vue 使用vuex在页面跳转 第一种方式:使用 router 动态路由传参,将需要的数据带过去 第二种方式:使用vuex vuex 页面跳转参数存储获取 vue中我们用于页面跳转有三种方式 首先需要 接收页面 vue 使用vuex在页面跳转 学习时候碰到的需求场景:我的音乐列表,点击一个音乐项跳转到音乐详情页 第一种方式:使用 router 动态路由传参,将需要的数据带过去 音乐列表页组件: 音乐详情页组件: 音乐列表页通过selectSong方法传参,在音乐详情页的挂载完成里面将数据赋

  • Python爬虫之Selenium中frame/iframe表单嵌套页面

    在Web应用中经常会遇到frame/iframe表单嵌套页面的应用,WebDriver只能在一个页面上对元素识别与定位,对于frame/iframe表单内嵌页面上的元素无法直接定位.这时就需要通过switch_to.frame()方法将当前定位的主体切换为frame/iframe表单的内嵌页面中. 本章中用到的关键方法如下: switch_to.frame():切换为frame/iframe表单的内嵌页面中 switch_to.parent_frame():退出内嵌页面 以ip138网站为例 f

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

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

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

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

随机推荐