在vue中实现嵌套页面(iframe) 程序员文章站 2024-01-18 21:38:22 vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… <p>vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/…</p> <blockquote> <p><iframe src="../../static/pluspro.html" width="1200" height="300" frameborder="0" scrolling="auto"style="position:absolute;top: -300px;left: 0px;"></iframe></p> </blockquote> <p><span style="color: #ff0000"><strong>补充知识：</strong></span><strong>关于vue嵌套iframe的一系列问题</strong></p> <p>此文是建立在vue-cli之上 ，当然单写也可以，下文会涉及一些关于cli的知识，单写的请忽略；</p> <p>最近有很多小伙伴问超哥关于vue中嵌套iframe一些问题。</p> <p>犹豫本尊最近转型了react，关于vue的问题以后会在csdn发表博客。</p> <p><strong>废话不多说，直接进入正题；</strong></p> <p>本尊并不建议vue嵌套iframe，当然会有那些个比较恶心的需求，例如在读的小伙伴。</p> <p>申明：本尊在iframe页面写入的是jq，因为和vue没有特别大的牵连，所以直接操作dom了，如果有同学依然想在iframe页面中也是可以的，只需把本尊的代码copy copy copy，然后在改吧改吧就ok了。</p> <p><strong>问题 1 (go back)</strong></p> <p>例如：在iframe页面中有诸多跳转，当完成玩iframe页面中一些操作时，此时点击浏览器的回退功能，那么恭喜你中奖了，你回退的是iframe页面，并无法回退和iframe无关联的vue页面，一直点击浏览器的回退，可能会一直重复iframe连接的几个页面，或直接404，或空白。</p> <p><span style="color: #ff00ff"><strong>解决办法：使用h5的history对象。</strong></span></p> <p>code：</p> <div class="jb51code"> <pre class="brush:js;"> $(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); });</pre> </div> <p>介绍：</p> <p>popstate：每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件。</p> <p>forward：移动到下一个访问页面，等同于浏览器的前进键。</p> <p>其他的没啥了吧，相信大家也都能看懂，其实只需copy copy copy；</p> <p><strong>问题 2 (iframe中的请求)；</strong></p> <p>关于请求其实没啥要说的，但是还是有人会问，既然问了那就顺便说一下吧。</p> <p>例如：有一个活动详情页面iframe，活动 列表是vue层，点击活动列表某一项跳详情，此时请求接口，地址栏带参数，像这种页面一般在iframe页面请求的接口中，最主要的参数就是活动id，当然不排除你们公司有个奇葩后台，或者刚从某培训机构培训出来的所谓大牛，以此类推，参数继续带过来。</p> <p>code:</p> <div class="jb51code"> <pre class="brush:js;"> 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); }//分装的滚动，白送 }</pre> </div> <p>这是本尊写的一个简单的base.js就是原生的面向对象。</p> <p>写到基址路径的时候这里还真有必要说一下这个请求。</p> <p>首先vue打包的时候并不会把iframe中的html打包进去，所以当初你在main.js中设置的那些基址以及common是不能用的，所以base.js才产生了基址路径，当然你准备部署的时候一定要记得改掉你的基址路径，建议，最好写两个，一个注释，一个打开，也挺方便，一目了然；</p> <p>接下来是调用，上代码；</p> <p>code:</p> <div class="jb51code"> <pre class="brush:js;"> 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 } ) })</pre> </div> <p>就个简单的ajax请求，真没啥要说，不过刚刚在写文的过程中又想起一些知识点，继续下文。</p> <p><strong>问题 3（由问题2引发===>关于目录）</strong></p> <p>npm run build 相信这条命令是干啥的大家都清楚，会生成一个dist文件，在这里我不批判他人，只说我的做法；</p> <p>例如：还是拿活动举例，活动列表下有诸多个不同的template，犹豫打包并不会把iframe文件打包进去，所以我直接把他放在dist文件下，发布的时候直接打包dist。</p> <p>直接上图：</p> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="在vue中实现嵌套页面(iframe)" src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDA3MzEvYl8wXzIwMjAwNzMxMDM1NzMxNjQ5OS5qcGc=" title="在vue中实现嵌套页面(iframe)"></p> <p>简单的介绍一下，dist不用多说了，static以及index.html也不用说了，最主要的看newact这个夹子，这个夹子就是你们所谓的活动夹子，里面有public和view，public主要放的一些公共的css、js、以及第三方包。view里面就是各个活动的夹子，例如duyuesheng这个夹子，就和你正常写h5一样，里面 有js、css，这些你们就随意发挥吧。</p> <p><strong>就先介绍到这里？</strong></p> <p>还有在iframe中操作vue的方法，在firame中跳转到vue指定的路径....问题有很多，也不是一句两句能说清楚的，关键没个很好的例子给大家演示，就这样吧，有不懂的可以留言或者私密我....</p> <p>此文写给那些需要的人看，不喜勿喷！！希望能给大家一个参考，也希望大家多多支持！</p> </div> <div class="tags"> 相关标签： <a href="/t/vue/" target="_blank"> vue </a> <a href="/t/%E5%B5%8C%E5%A5%97/" target="_blank"> 嵌套 </a> <a href="/t/%E9%A1%B5%E9%9D%A2/" target="_blank"> 页面 </a> <a href="/t/iframe/" target="_blank"> iframe </a> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/2380498.html"> 央视称自动驾驶技术是汽车行业新热点，但仍不成熟 </a> </p> <p> 下一篇： <a href="/article/2380507.html"> 导入新价值 2013年CIO将借力大数据展翅再飞翔 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2380500.html" target="_blank" title="在vue中实现嵌套页面(iframe)"> <h2> 在vue中实现嵌套页面(iframe) </h2> </a> </li> <li> <a href="/article/2380235.html" target="_blank" title="js将iframe中控件的值传到主页面控件中的实现方法_javascript技巧"> <h2> js将iframe中控件的值传到主页面控件中的实现方法_javascript技巧 </h2> </a> </li> <li> <a href="/article/2368516.html" target="_blank" title="在Vue 组件Toast中如何实现显示框效果"> <h2> 在Vue 组件Toast中如何实现显示框效果 </h2> </a> </li> <li> <a href="/article/2361447.html" target="_blank" title="js如何判断是否在iframe中及防止网页被别站用iframe嵌套"> <h2> js如何判断是否在iframe中及防止网页被别站用iframe嵌套 </h2> </a> </li> <li> <a href="/article/2352509.html" target="_blank" title="在vue-cli中如何实现移动端自适应"> <h2> 在vue-cli中如何实现移动端自适应 </h2> </a> </li> <li> <a href="/article/2348298.html" target="_blank" title="在vue.js中如何使用ajax渲染页面"> <h2> 在vue.js中如何使用ajax渲染页面 </h2> </a> </li> <li> <a href="/article/2336627.html" target="_blank" title="js将iframe中控件的值传到主页面控件中的实现方法_javascript技巧"> <h2> js将iframe中控件的值传到主页面控件中的实现方法_javascript技巧 </h2> </a> </li> <li> <a href="/article/2322481.html" target="_blank" title="在webpack-dev-server中实现自动更新页面"> <h2> 在webpack-dev-server中实现自动更新页面 </h2> </a> </li> <li> <a href="/article/2318470.html" target="_blank" title="在Vue2.0中实现用户权限控制"> <h2> 在Vue2.0中实现用户权限控制 </h2> </a> </li> <li> <a href="/article/2295250.html" target="_blank" title="在vue中如何实现图片loading组件"> <h2> 在vue中如何实现图片loading组件 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>