vue中嵌套iframe,將要嵌套的文件放在static下面。src可以使用相對(duì)路徑，也可使用服務(wù)器根路徑http:localhost:8088/…

<iframe src="../../static/plusPro.html" width="1200" height="300" frameborder="0" scrolling="auto"style="position:absolute;top: -300px;left: 0px;"></iframe>

補(bǔ)充知識(shí)：關(guān)于VUE嵌套iframe的一系列問(wèn)題

此文是建立在vue-cli之上 ，當(dāng)然單寫(xiě)也可以，下文會(huì)涉及一些關(guān)于cli的知識(shí)，單寫(xiě)的請(qǐng)忽略；

最近有很多小伙伴問(wèn)超哥關(guān)于vue中嵌套iframe一些問(wèn)題。

猶豫本尊最近轉(zhuǎn)型了react，關(guān)于vue的問(wèn)題以后會(huì)在csdn發(fā)表博客。

廢話(huà)不多說(shuō)，直接進(jìn)入正題；

本尊并不建議vue嵌套iframe，當(dāng)然會(huì)有那些個(gè)比較惡心的需求，例如在讀的小伙伴。

申明：本尊在iframe頁(yè)面寫(xiě)入的是JQ，因?yàn)楹蚔UE沒(méi)有特別大的牽連，所以直接操作dom了，如果有同學(xué)依然想在iframe頁(yè)面中也是可以的，只需把本尊的代碼copy copy copy，然后在改吧改吧就OK了。

問(wèn)題 1 (go back)

例如：在iframe頁(yè)面中有諸多跳轉(zhuǎn)，當(dāng)完成玩iframe頁(yè)面中一些操作時(shí)，此時(shí)點(diǎn)擊瀏覽器的回退功能，那么恭喜你中獎(jiǎng)了，你回退的是iframe頁(yè)面，并無(wú)法回退和iframe無(wú)關(guān)聯(lián)的vue頁(yè)面，一直點(diǎn)擊瀏覽器的回退，可能會(huì)一直重復(fù)iframe連接的幾個(gè)頁(yè)面，或直接404，或空白。

解決辦法：使用H5的history對(duì)象。

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';//這里寫(xiě)你自己要回退的路徑
        });
     }
 
     window.history.pushState('forward', null, '#'); //在IE中必須得有這兩行
     window.history.forward(1);
  });

介紹：

popstate：每當(dāng)同一個(gè)文檔的瀏覽歷史（即history對(duì)象）出現(xiàn)變化時(shí)，就會(huì)觸發(fā)popstate事件。

forward：移動(dòng)到下一個(gè)訪(fǎng)問(wèn)頁(yè)面，等同于瀏覽器的前進(jìn)鍵。

其他的沒(méi)啥了吧，相信大家也都能看懂，其實(shí)只需copy copy copy；

問(wèn)題 2 (iframe中的請(qǐng)求)；

關(guān)于請(qǐng)求其實(shí)沒(méi)啥要說(shuō)的，但是還是有人會(huì)問(wèn)，既然問(wèn)了那就順便說(shuō)一下吧。

例如：有一個(gè)活動(dòng)詳情頁(yè)面iframe，活動(dòng) 列表是vue層，點(diǎn)擊活動(dòng)列表某一項(xiàng)跳詳情，此時(shí)請(qǐng)求接口，地址欄帶參數(shù)，像這種頁(yè)面一般在iframe頁(yè)面請(qǐng)求的接口中，最主要的參數(shù)就是活動(dòng)ID，當(dāng)然不排除你們公司有個(gè)奇葩后臺(tái)，或者剛從某培訓(xùn)機(jī)構(gòu)培訓(xùn)出來(lái)的所謂大牛，以此類(lèi)推，參數(shù)繼續(xù)帶過(guò)來(lái)。

code:

function PcCommon(){
 this.baseUrl='https://xxxxxxx';這里寫(xiě)你的基址路徑
}
PcCommon.prototype={
 GetQueryString: function(name) {
 return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
 },//獲取地址欄參數(shù)
 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);
 }//分裝的滾動(dòng)，白送
}

這是本尊寫(xiě)的一個(gè)簡(jiǎn)單的base.js就是原生的面向?qū)ο蟆?/p>

寫(xiě)到基址路徑的時(shí)候這里還真有必要說(shuō)一下這個(gè)請(qǐng)求。

首先vue打包的時(shí)候并不會(huì)把iframe中的html打包進(jìn)去，所以當(dāng)初你在main.js中設(shè)置的那些基址以及common是不能用的，所以base.js才產(chǎn)生了基址路徑，當(dāng)然你準(zhǔn)備部署的時(shí)候一定要記得改掉你的基址路徑，建議，最好寫(xiě)兩個(gè)，一個(gè)注釋?zhuān)粋€(gè)打開(kāi)，也挺方便，一目了然；

接下來(lái)是調(diào)用，上代碼；

code:

var newHd=new PcCommon();
 var actStage=newHd.GetQueryString('actStage');//獲取iframe地址欄參數(shù)實(shí)例
 var actId=newHd.GetQueryString('actId');//獲取活動(dòng)ID
 newHd.baseUrl = 'http://192.168.0.13:7500/';//更改你的基址路徑，上線(xiàn)的時(shí)候直接注釋掉就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)
        //直接寫(xiě)你的操作就OK
  }
 )
 })

就個(gè)簡(jiǎn)單的ajax請(qǐng)求，真沒(méi)啥要說(shuō)，不過(guò)剛剛在寫(xiě)文的過(guò)程中又想起一些知識(shí)點(diǎn)，繼續(xù)下文。

問(wèn)題 3（由問(wèn)題2引發(fā)===>關(guān)于目錄）

npm run build 相信這條命令是干啥的大家都清楚，會(huì)生成一個(gè)dist文件，在這里我不批判他人，只說(shuō)我的做法；

例如：還是拿活動(dòng)舉例，活動(dòng)列表下有諸多個(gè)不同的template，猶豫打包并不會(huì)把iframe文件打包進(jìn)去，所以我直接把他放在dist文件下，發(fā)布的時(shí)候直接打包dist。

直接上圖：

簡(jiǎn)單的介紹一下，dist不用多說(shuō)了，static以及index.html也不用說(shuō)了，最主要的看newAct這個(gè)夾子，這個(gè)夾子就是你們所謂的活動(dòng)夾子，里面有public和view，public主要放的一些公共的css、js、以及第三方包。view里面就是各個(gè)活動(dòng)的夾子，例如duyuesheng這個(gè)夾子，就和你正常寫(xiě)H5一樣，里面 有js、css，這些你們就隨意發(fā)揮吧。

就先介紹到這里？

還有在iframe中操作vue的方法，在firame中跳轉(zhuǎn)到vue指定的路徑....問(wèn)題有很多，也不是一句兩句能說(shuō)清楚的，關(guān)鍵沒(méi)個(gè)很好的例子給大家演示，就這樣吧，有不懂的可以留言或者私密我....

此文寫(xiě)給那些需要的人看，不喜勿噴??！希望能給大家一個(gè)參考，也希望大家多多支持腳本之家！

最新評(píng)論