Explication détaillée du chargement de la page VUE par une instance 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 qu'il 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

Remarque :

• Utilisez axios pour gérer directement les requêtes GET et devez gérer plusieurs domaines

• Le style CSS externe sera appliqué au HTML affiché

• Le script dans le HTML externe chargé en même temps peut également être exécuté et doit être traités à la demande. Les chemins relatifs dans les fichiers HTML externes sous

• ne seront pas automatiquement reconnus. Les chemins absolus peuvent être

configuration inter-domaines NGINX. :

(L'origine semble être fausse si * est utilisé. L'adresse de la source de la demande est utilisée directement ici. Si vous vous inquiétez pour la sécurité, vous pouvez utiliser if + 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 :

Exemple d'utilisation du paramètre HTML de chargement d'iframe du cadre flottant HTML

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!