Comment intégrer des pages Web dans vue

Lors du développement d'une application Web, nous devons souvent intégrer des pages Web externes (telles que des cartes, des pages de paiement, etc.) dans nos propres pages Web. Comment y parvenir ? Il existe de nombreuses façons d'implémenter des pages Web intégrées dans Vue. Présentons-les une par une ci-dessous.

1. Méthode iframe

La méthode la plus simple consiste à utiliser la balise iframe en HTML pour intégrer la page Web externe dans la page principale en tant que fenêtre intégrée. Dans Vue, cela peut être réalisé comme suit :

<template>
  <div class="container">
    <iframe
      src="http://example.com"
      frameborder="0"
      width="100%"
      height="100%"
    ></iframe>
  </div>
</template>

Ici, nous définissons l'adresse de la page Web externe intégrée src-iframe, frameborder-set la bordure, la largeur et la hauteur définissons respectivement la largeur et la hauteur de l'iframe.

Cependant, cette méthode présente certaines limites. De manière générale, les iframes ralentiront le chargement des pages et affecteront l'expérience utilisateur, et les politiques de sécurité du navigateur peuvent également limiter l'utilisation des iframes. Nous devons donc envisager d’autres méthodes.

2. méthode objet

Dans Vue, vous pouvez également utiliser la balise objet pour intégrer des pages Web.

<template>
  <div class="container">
    <object :data="url" type="text/html" width="100%" height="100%"></object>
  </div>
</template>
<script>
export default {
  data() {
    return {
      url: "http://example.com",
    };
  },
};
</script>

Dans cet exemple, nous spécifions l'URL à intégrer via l'attribut data. L'utilisation de la balise object optimise les performances et améliore la sécurité par rapport aux iframes. De plus, object est en fait une méthode intégrée recommandée par le W3C.

Cependant, il existe également certaines limites. Par exemple, la balise object peut ne pas fonctionner sur certains navigateurs ou pages.

3. Méthode Vue-iframe

Vue-iframe est un plug-in spécialement développé pour Vue, qui résout dans une certaine mesure les problèmes des deux méthodes ci-dessus. Il facilite le travail avec les iframes et fournit des fonctionnalités supplémentaires telles que le contenu CSS personnalisable, l'ajustement automatique de la hauteur des iframes, etc. L'utilisation spécifique est la suivante :

Tout d'abord, nous devons installer Vue-iframe :

npm install vue-iframe

Ensuite, nous devons introduire Vue-iframe dans Vue :

import VueIframe from "vue-iframe";

Vue.use(VueIframe);

Enfin, nous pouvons utiliser Vue-iframe pour intégrer des pages Web :

<template>
  <div class="container">
    <vue-iframe url="http://example.com" :styles="{ height: '100%' }" />
  </div>
</template>

Vue-iframe peut accepter plusieurs attributs, ce qui peut nous aider à contrôler facilement l'iframe. L'attribut url est obligatoire et spécifie l'URL à intégrer. L'attribut styles est facultatif et est utilisé pour personnaliser le style de l'iframe (comme dans l'exemple ci-dessus, le style height est utilisé pour définir la hauteur de l'iframe).

Résumé

Ci-dessus sont trois méthodes d'intégration de pages Web dans Vue. La méthode à utiliser dépend des besoins et des préférences de votre projet. Si vous avez simplement besoin d'intégrer une page Web, une iframe ou un objet fera l'affaire. Si vous avez besoin de fonctionnalités plus avancées, telles que l'ajustement automatique de la hauteur de l'iframe, etc., vous pouvez choisir Vue-iframe. Quelle que soit la méthode que vous choisissez, n’oubliez pas de prendre en compte les performances et la sécurité.

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!