La page VUE implémente la méthode de chargement HTML externe

Les extrémités avant et arrière sont séparées et l'arrière fournit l'interface. Mais certaines données, comparant les fichiers de description des produits, sont stockées sur d'autres serveurs. Ainsi, lorsque la page est affichée, si ce fichier de description est affiché sous forme d'inline dans la page. Il faut faire quelque chose pour obtenir l’effet souhaité. Cet article vous présente principalement l'exemple de code pour charger du HTML externe dans la page VUE. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Différent de la balise IFRAME précédente, cette méthode est relativement faible et présente quelques autres bugs.

L'idée de cet article est de charger la requête HTML dans la page sous forme de v-html. Enregistrer le composant global [v-html-panel]

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

Rendu précédent

Remarques :

• Utilisez directement axios pour gérer les requêtes GET, qui doivent gérer plusieurs domaines

• Les styles CSS externes affecteront le code HTML affiché

• Le script dans le HTML externe chargé en même temps peut également être exécuté, qui doit être traité selon les besoins

• Le chemin relatif à l'intérieur du fichier HTML externe ne sera pas Il est automatiquement reconnu, et le chemin absolu peut être

Configuration inter-domaines NGINX :

(Origin semble provoquer une erreur si * est utilisé. Ici, la source de la requête est utilisée directement. Adresse, si vous êtes inquiet pour la sécurité, vous pouvez utiliser si + conditions régulières pour juger)

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;

  ...
}

Recommandations associées :

Explication détaillée de la façon de charger des fichiers CSS externes dans jQuery

Deux méthodes de chargement HTML de fichiers CSS externes

jquery a retardé le chargement de l'implémentation js externe Code_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!