집 > 기사 > 웹 프론트엔드 > 외부 HTML 인스턴스를 로드하는 VUE 페이지에 대한 자세한 설명

외부 HTML 인스턴스를 로드하는 VUE 페이지에 대한 자세한 설명

小云云원래의: 2018-05-15 11:35:284897검색

앞부분과 뒷부분이 분리되어 있으며, 뒷부분이 인터페이스를 제공합니다. 그러나 제품 설명 파일을 비교하는 일부 데이터는 다른 서버에 저장됩니다. 따라서 페이지가 표시될 때 이 설명 파일이 페이지에 인라인 형태로 표시되면 됩니다. 원하는 효과를 얻으려면 뭔가를 수행해야 합니다. 이번 글에서는 주로 VUE 페이지에 외부 HTML을 로딩하기 위한 샘플 코드를 소개하고 있는데, 에디터가 꽤 괜찮다고 생각해서 지금부터 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

이전 IFRAME 태그와 달리 해당 방법은 상대적으로 낮은 수준이며 다른 버그가 있습니다.

이 글의 아이디어는 HTML 요청을 v-html 형식으로 페이지에 로드하는 것입니다. 전역 구성요소 등록 [v-html-panel]

1.HtmlPanel.vue 파일

<template>
 <p>
  <mu-circular-progress :size="40" v-if="loading"/>
  <p v-html="html"></p>
 </p>
</template>
<style>

</style>
<script>
 export default{
  // 使用时请使用 :url.sync=""传值
  props: {
   url: {
    required: true
   }
  },
  data () {
   return {
    loading: false,
    html: &#39;&#39;
   }
  },
  watch: {
   url (value) {
    this.load(value)
   }
  },
  mounted () {
   this.load(this.url)
  },
  methods: {
   load (url) {
    if (url && url.length > 0) {
     // 加载中
     this.loading = true
     let param = {
      accept: &#39;text/html, text/plain&#39;
     }
     this.$http.get(url, param).then((response) => {
      this.loading = false
      // 处理HTML显示
      this.html = response.data
     }).catch(() => {
      this.loading = false
      this.html = &#39;加载失败&#39;
     })
    }
   }
  }
 }
</script>

htmlViewSample.vue

<template>
 <p>
  <v-html-panel :url.asyc="url1"></v-html-panel>
  <v-html-panel :url.asyc="url2"></v-html-panel>
 </p>
</template>
<style scoped>
 p{color:red}
</style>
<script>
 export default{
  data () {
   return {
    url1: &#39;&#39;,
    url2: &#39;&#39;
   }
  },
  mounted () {
   this.url1 = &#39;http://file.xxx.com/group1/M00/0C/F5/xxxxxxxx.html&#39;
   this.url2 = &#39;http://file.xxx.com/group1/M00/0D/3B/yyyyyyy.html&#39;
  },
  methods: {
  }
 }
</script>

마지막 렌더링

참고:

axios를 직접 사용하세요. 요청 처리된 내용은 여러 도메인에서 처리되어야 합니다
외부 CSS 스타일은 표시된 HTML에 적용됩니다
동시에 로드된 외부 HTML의 스크립트도 실행될 수 있으므로 요청 시 처리해야 합니다
External HTML 파일 내부의 상대 경로는 자동으로 인식되지 않습니다. 절대 경로는

NGINX 크로스 도메인 구성:

일 수 있습니다. (Origin에서 *를 사용하면 오류가 발생할 것으로 보입니다.) .여기서는 요청 소스 주소를 직접 사용하세요. 그렇지 않은 경우 if+regular 조건을 사용하여 판단할 수 있습니다.)

location / {
  add_header Access-Control-Allow-Origin $http_origin;
  add_header Access-Control-Allow-Credentials true;
  add_header Access-Control-Allow-Methods GET;

  access_log /data/nginx/logs/fdfs_https.log main;

  ...
}

외부 HTML 인스턴스를 로드하는 VUE 페이지에 대한 자세한 설명

관련 기사