如何将Vue中的iframe嵌套页面转换为长尾关键词？
- 内容介绍
- 文章标签
- 相关推荐
本文共计772个文字，预计阅读时间需要4分钟。
在Vue中嵌套iframe，需要将嵌套的文件放置在`static`目录下。`src`可以使用相对路径或服务器根路径。示例代码如下：
vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径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 = '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指定的路径....问题有很多，也不是一句两句能说清楚的，关键没个很好的例子给大家演示，就这样吧，有不懂的可以留言或者私密我....
此文写给那些需要的人看，不喜勿喷！！希望能给大家一个参考，也希望大家多多支持易盾网络！
本文共计772个文字，预计阅读时间需要4分钟。
在Vue中嵌套iframe，需要将嵌套的文件放置在`static`目录下。`src`可以使用相对路径或服务器根路径。示例代码如下：
vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径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 = '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指定的路径....问题有很多，也不是一句两句能说清楚的，关键没个很好的例子给大家演示，就这样吧，有不懂的可以留言或者私密我....
此文写给那些需要的人看，不喜勿喷！！希望能给大家一个参考，也希望大家多多支持易盾网络！