在vue中实现嵌套页⾯（iframe）
vue中嵌套iframe，将要嵌套的⽂件放在static下⾯。src可以使⽤相对路径，也可使⽤服务器根路径http:localhost:8088/…
<iframe src="../../static/plusPro.html" width="1200" height="300" frameborder="0"
scrolling="auto"></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='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。
直接上图：
iframe嵌套页面加载慢简单的介绍⼀下，dist不⽤多说了，static以及index.html也不⽤说了，最主要的看newAct这个夹⼦，这个夹⼦就是你们所谓的活动夹⼦，⾥⾯有public和view，public主要放的⼀些公共的css、js、以及第三⽅包。view⾥⾯就是各个活动的夹⼦，例如duyuesheng这个夹⼦，就和你正常写H5⼀样，⾥⾯有js、css，这些你们就随意发挥吧。
就先介绍到这⾥？
还有在iframe中操作vue的⽅法，在firame中跳转到vue指定的路径....问题有很多，也不是⼀句两句能说清楚的，关键没个很好的例⼦给⼤家演⽰，就这样吧，有不懂的可以留⾔或者私密我....
此⽂写给那些需要的⼈看，不喜勿喷！！希望能给⼤家⼀个参考，也希望⼤家多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。