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','#'); //在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;
 },//獲取位址列引數
 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 = '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
  }
 )
 })

就個簡單的ajax請求，真沒啥要說，不過剛剛在寫文的過程中又想起一些知識點，繼續下文。

問題 3（由問題2引發===>關於目錄）

npm run build 相信這條命令是幹啥的大家都清楚，會生成一個dist檔案，在這裡我不批判他人，只說我的做法；

例如：還是拿活動舉例，活動列表下有諸多個不同的template，猶豫打包並不會把iframe檔案打包進去，所以我直接把他放在dist檔案下，釋出的時候直接打包dist。

直接上圖：

簡單的介紹一下，dist不用多說了，static以及index.html也不用說了，最主要的看newAct這個夾子，這個夾子就是你們所謂的活動夾子，裡面有public和view，public主要放的一些公共的css、js、以及第三方包。view裡面就是各個活動的夾子，例如duyuesheng這個夾子，就和你正常寫H5一樣，裡面 有js、css，這些你們就隨意發揮吧。

就先介紹到這裡？

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

此文寫給那些需要的人看，不喜勿噴！！希望能給大家一個參考，也希望大家多多支援我們！