VUE page implements loading external HTML method

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

Last rendering

Notes:

• Directly use axios to handle GET requests, which need to handle cross-domain

• External css styles will affect the displayed html

• The script in the external HTML loaded at the same time may also be executed and needs to be processed as needed

• The relative path inside the external HTML file will not be automatically recognized. The absolute path can be

NGINX cross-domain configuration:

(If you use * for Origin, it seems that an error will occur. Here, use the address of the request source directly. If you are worried For safety, 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:

How to load in jQuery Detailed explanation of the usage of external css files

Two methods for HTML to load external css files

jquery delayed loading of external js implementation code_jquery

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