Detaillierte Erläuterung des Ladens einer externen HTML-Instanz auf einer VUE-Seite

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. Dieser Artikel stellt Ihnen hauptsächlich den Beispielcode zum Laden von externem HTML auf der VUE-Seite vor. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. 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 Rendern

Hinweis:

• Verwenden Sie Axios, um GET-Anfragen direkt zu bearbeiten, und müssen Sie domänenübergreifend verarbeiten

• Der externe CSS-Stil wird auf das angezeigte HTML angewendet

• Das Skript im gleichzeitig geladenen externen HTML kann ebenfalls ausgeführt werden und muss ausgeführt werden werden bei Bedarf verarbeitet. Relative Pfade innerhalb externer HTML-Dateien unter

• werden nicht automatisch erkannt. Absolute Pfade können

NGINX-domänenübergreifende Konfiguration sein :

(Der Ursprung scheint falsch zu sein, wenn * verwendet wird. Die Adresse der Anforderungsquelle wird hier direkt verwendet. Wenn Sie sich Sorgen um die Sicherheit machen, können Sie zur Beurteilung if + reguläre Bedingungen verwenden.)

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;

  ...
}

Verwandte Empfehlungen:

Verwendungsbeispiel für die Iframe-Lade-HTML-Einstellung des HTML-Floating-Frames

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Ladens einer externen HTML-Instanz auf einer VUE-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!