vue 에 포 함 된 페이지 구현(iframe)

vue 에 iframe 을 끼 워 넣 고 끼 워 넣 을 파일 을 static 아래 에 놓 습 니 다.src 는 상대 경 로 를 사용 할 수도 있 고 서버 루트 경로 http:localhost:8088/...

질문
이 글 은 vue-cli 위 에 세 워 진 것 입 니 다.물론 단독으로 써 도 됩 니 다.다음 글 은 cli 에 관 한 지식 과 관련 될 것 입 니 다.단독으로 쓴 것 은 무시 하 십시오.
최근 많은 젊은이 들 이 초 형 에 게 vue 에 포 함 된 iframe 에 대해 물 었 다.
머 뭇 거 리 며 본 존 은 최근 react 로 바 뀌 었 으 며,vue 에 관 한 문 제 는 나중에 csdn 에 블 로 그 를 발표 할 예정 이다.
쓸데없는 말 은 그만 하고 바로 본론 으로 들 어가 자.
본 존 은 vue 에 iframe 을 끼 워 넣 는 것 을 권장 하지 않 습 니 다.물론 읽 고 있 는 동료 들 과 같은 더러 운 수요 가 있 을 것 입 니 다.
설명:본 존 은 iframe 페이지 에 JQ 를 썼 습 니 다.VUE 와 큰 관련 이 없 기 때문에 dom 을 직접 작 동 했 습 니 다.만약 에 친구 가 iframe 페이지 에 있 고 싶 어도 괜 찮 습 니 다.본 존의 코드 copy copy copy copy 를 고 친 다음 에 고치 면 됩 니 다.
질문 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;
 },//       
 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 도 말 할 필요 가 없습니다.가장 중요 한 것 은 new Act 라 는 클립 입 니 다.이 클립 은 바로 당신들 이 말 하 는 활동 클립 입 니 다.그 안에 Public 와 view 가 있 고 Public 는 주로 공공 css,js,그리고 제3자 가방 을 넣 습 니 다.view 안 에는 각 활동 의 클립 이 있 습 니 다.예 를 들 어 duyuesheng 이라는 클립 은 당신 이 정상적으로 H5 를 쓰 는 것 과 마찬가지 로 그 안에 js,css 가 있 습 니 다.이런 것들 을 마음대로 발휘 하 세 요.
여기까지 소개 할 까요?
그리고 iframe 에서 vue 를 조작 하 는 방법,firame 에서 vue 가 지정 한 경로 로 넘 어 가 는 방법.............................................................
이 글 은 필요 한 사람들 에 게 보 여 주 며,좋아 하지 않 으 면 뿌리 지 마라!!여러분 에 게 참고 가 될 수 있 기 를 바 랍 니 다.여러분 들 도 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다!