Detailed explanation of VUE page loading external HTML instance

The front and back ends are separated, and the back end provides an interface. But some data, comparing product description files, are stored on other servers. Therefore, when the page is displayed, if this description file is displayed in the form of inline in the page. Something needs to be done to achieve the desired effect. This article mainly introduces you to the sample code for loading external HTML in the VUE page. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Different from the previous IFRAME tag, that method is relatively low and has some other bugs.

The idea of ​​this article is to load the HTML request into the page in the form of v-html. Register global component [v-html-panel]

1.HtmlPanel.vue file

<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>

Previous rendering

Notes:

• Directly use GET requests processed by axios and need to handle cross-domain

• External css styles will be applied to the displayed html

• The script in the external html loaded at the same time may also be executed, which needs to be processed as needed

• Relative paths within external HTML files will not be automatically recognized, absolute paths can be

NGINX cross-domain configuration:

(Origin seems to be wrong if * is used. The address of the request source is used directly here. If you are worried about security, you can use if+regular conditions to judge)

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;

  ...
}

Related recommendations:

htmlSuspended frame iframe loading html settings usage example

The above is the detailed content of Detailed explanation of VUE page loading external HTML instance. For more information, please follow other related articles on the PHP Chinese website!