在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 EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
Prototype框架详解
Nov 25 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
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
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
php 魔术方法详解
2014/11/11 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
跟老齐学Python之数据类型总结
2014/09/24 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
20招让你的Python飞起来!
2016/09/27 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Sanic框架应用部署方法详解
2018/07/18 Python
Python的互斥锁与信号量详解
2019/09/12 Python
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
先进工作者事迹材料
2014/12/23 职场文书
手机销售员岗位职责
2015/04/11 职场文书
员工离职通知函
2015/04/25 职场文书
责任书范本大全
2015/05/11 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
服务器间如何实现文件共享
2022/05/20 Servers
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis