在在vue中实现嵌套页面中实现嵌套页面(iframe)
主要介绍了在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;
},//获取地址栏参数
评论0