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


Posted in Javascript onJuly 30, 2020

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。

直接上图:

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

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

就先介绍到这里?

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

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

Javascript 相关文章推荐
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 Javascript
Vue自定义多选组件使用详解
Sep 08 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 Javascript
js实现日历
Nov 07 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 #Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 #Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 #Javascript
Vue Render函数原理及代码实例解析
Jul 30 #Javascript
vue - props 声明数组和对象操作
Jul 30 #Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 #Javascript
vue如何使用外部特殊字体的操作
Jul 30 #Javascript
You might like
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
YII框架常用技巧总结
2019/04/27 PHP
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
[01:46]新英雄登场
2019/09/10 DOTA
Django框架下在视图中使用模版的方法
2015/07/16 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
python进行文件对比的方法
2018/12/24 Python
Python高斯消除矩阵
2019/01/02 Python
Python----数据预处理代码实例
2019/03/20 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
数据库基础的一些面试题
2012/02/25 面试题
2014年安全生产目标责任书
2014/07/23 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
经理聘任证明
2015/03/02 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书