Maison >interface Web >js tutoriel >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: '' } }, 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: 'text/html, text/plain' } this.$http.get(url, param).then((response) => { this.loading = false // 处理HTML显示 this.html = response.data }).catch(() => { this.loading = false this.html = '加载失败' }) } } } } </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: '', url2: '' } }, mounted () { this.url1 = 'http://file.xxx.com/group1/M00/0C/F5/xxxxxxxx.html' this.url2 = 'http://file.xxx.com/group1/M00/0D/3B/yyyyyyy.html' }, 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!