站长资源网络编程 在vue中实现嵌套页面(iframe) 整理:jimmy2025/4/22浏览2次 站长资源 网络编程 网盘链接 云盘下载 简介vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… <div class="news_infos"><div id="MyContent"><p>vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/…</p> <blockquote> <p><iframe src="/UploadFiles/2021-04-02/plusPro.html"> </blockquote> <p><strong>补充知识：</strong><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><strong>解决办法：使用H5的history对象。</strong></p> <p>code：</p> <div class="htmlcode"> <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="htmlcode"> <pre class="brush:js;"> function PcCommon(){ this.baseUrl='https://xxxxxxx';这里写你的基址路径 } PcCommon.prototype={ GetQueryString: function(name) { return decodeURIComponent((new RegExp('[""])[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="htmlcode"> <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><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20200730150831.jpg');"><img src="/UploadFiles/2021-04-02/20200730150831.jpg" alt="在vue中实现嵌套页面(iframe)" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></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> </div> <div class="share"> </div> <div class="nextinfo"> <p>上一篇：<a href="/3g/1/79725.html" title="vue实现从外部修改组件内部的变量的值">vue实现从外部修改组件内部的变量的值</a></p> <p>下一篇：<a href="/3g/1/79727.html" title="Vue文本模糊匹配功能如何实现">Vue文本模糊匹配功能如何实现</a></p> </div> <div class="otherlink"> <h2>最新资源</h2> <ul> <li><a href="/3g/1/623703.html" title="群星《奔赴！万人现场 第2期》[FLAC/分轨]">群星《奔赴！万人现场 第2期》[FLAC/分轨]</a></li> <li><a href="/3g/1/623702.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li> <li><a href="/3g/1/623701.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li> <li><a href="/3g/1/623700.html" title="【古典音乐】詹姆斯·高威《季节》1993[WA">【古典音乐】詹姆斯·高威《季节》1993[WA</a></li> <li><a href="/3g/1/623699.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li> <li><a href="/3g/1/623698.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE</a></li> <li><a href="/3g/1/623697.html" title="群星《欢迎来到我身边 电影原声专辑》[32">群星《欢迎来到我身边 电影原声专辑》[32</a></li> <li><a href="/3g/1/623696.html" title="群星《欢迎来到我身边 电影原声专辑》[FL">群星《欢迎来到我身边 电影原声专辑》[FL</a></li> <li><a href="/3g/1/623695.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低</a></li> <li><a href="/3g/1/623694.html" title="群星《2024好听新歌42》AI调整音效【WAV分">群星《2024好听新歌42》AI调整音效【WAV分</a></li> </ul> </div> </div> <div class="sidebar"> <div class="cloud"><h2 class="hometitle">一句话新闻</h2><a href="/3G/1/604623.html"><ul>一文看懂荣耀MagicBook Pro 16<br><br>荣耀猎人回归！七大亮点看懂不只是轻薄本，更是游戏本的MagicBook Pro 16.<br>人们对于笔记本电脑有一个固有印象：要么轻薄但性能一般，要么性能强劲但笨重臃肿。然而，今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上，荣耀宣布猎人游戏本正式回归，称其继承了荣耀 HUNTER 基因，并自信地为其打出“轻薄本，更是游戏本”的口号。<br>众所周知，寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验，而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起，我们不禁对它产生了强烈的好奇：作为代表荣耀猎人游戏本的跨界新物种，它究竟做了哪些平衡以兼顾不同人群的各类需求呢？</ul></a></div> </div> <div class="sidebar"> 友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a> </div> </article> <footer> <p>Design by <a href="http://m.ddrfans.com">DDR爱好者之家</a> <a href="http://m.ddrfans.com">http://m.ddrfans.com</a></p> </footer> <script src="/images3g/nav.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(function() { var elm = jQuery('#left_flow2'); var startPos = jQuery(elm).offset().top; jQuery.event.add(window, "scroll", function() { var p = jQuery(window).scrollTop(); jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : ''); jQuery(elm).css('top', ((p) > startPos) ? '0' : ''); }); }); </script> </body> </html>