Die VUE-Seite implementiert das Laden einer externen HTML-Methode

Das vordere und hintere Ende sind getrennt und das hintere Ende stellt die Schnittstelle bereit. Einige Daten, z. B. Produktbeschreibungsdateien, werden jedoch auf anderen Servern gespeichert. Wenn die Seite angezeigt wird, wird diese Beschreibungsdatei daher in Form von Inline auf der Seite angezeigt. Es muss etwas getan werden, um den gewünschten Effekt zu erzielen. In diesem Artikel wird Ihnen hauptsächlich der Beispielcode zum Laden von externem HTML auf der VUE-Seite vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Im Gegensatz zum vorherigen IFRAME-Tag ist diese Methode relativ einfach und weist einige andere Fehler auf.

Die Idee dieses Artikels besteht darin, die HTML-Anfrage in Form von V-HTML in die Seite zu laden. Registrieren Sie die globale Komponente [v-html-panel]

1.HtmlPanel.vue-Datei

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

Vorheriges Rendering

Hinweise:

• Verwenden Sie Axios direkt, um GET-Anfragen zu verarbeiten, die domänenübergreifend verarbeitet werden müssen

• Externe CSS-Stile wirken sich auf das angezeigte HTML aus

• Das Skript im gleichzeitig geladenen externen HTML-Code kann ebenfalls ausgeführt werden, was bei Bedarf verarbeitet werden muss

• Der relative Pfad innerhalb der externen HTML-Datei wird nicht Es wird automatisch erkannt und der absolute Pfad kann sein

NGINX Cross-Domain-Konfiguration:

(Origin scheint einen Fehler zu verursachen, wenn * ist Hier wird die Anforderungsquelle direkt verwendet. Wenn Sie sich Sorgen um die Sicherheit machen, können Sie die if+regular-Bedingungen zur Beurteilung verwenden >Verwandte Empfehlungen:

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;

  ...
}

Detaillierte Erklärung zum Laden externer CSS-Dateien in jQuery

Zwei Methoden zum Laden externer CSS-Dateien mit HTML

jquery verzögertes Laden der externen JS-Implementierung Code_jquery

Das obige ist der detaillierte Inhalt vonDie VUE-Seite implementiert das Laden einer externen HTML-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!