web-dev-qa-db-fra.com

Annonces avec balises de script dans le modèle [Vue.js]

Dans notre projet, nous utilisions précédemment Thymeleaf, mais maintenant que nous passons à Vue.js, nous rencontrons des problèmes avec les mêmes scripts de publicité. Les scripts ressemblent à ceci. J'ai seulement modifié les URL. 

<script data-adfscript="sub.adcompany.net/asdf/?id=256746"></script>
<script src="//sub.adcompany.net/url/to/advertisement/script.js"  async="async" defer="defer"></script>

Si nous mettons ces balises dans le <template>, Webpack affiche le message suivant:

Les modèles ne devraient être responsables que du mappage de l'état sur l'interface utilisateur . Évitez de placer des étiquettes avec des effets secondaires dans vos modèles, tels que , car ils ne seront pas analysés.

J'ai donc été sur Google pour trouver un cas similaire. Certains plugins le font pour les annonces Google, mais ils ne fonctionneront pas pour nous. Échapper aux balises de script <\/script> fonctionne d'une certaine manière, mais le script n'est ajouté au DOM que jusqu'au après chargé, et il ne s'exécute pas. 

Quelqu'un at-il rencontré des problèmes similaires? Si oui, quelle était votre solution? 

Le fichier Vue ressemble à ceci:

<template>
  <aside class="sidebar-ad ui-wide">
    <script data-adfscript="sub.adcompany.net/asdf/?id=256746"></script>
    <script src="//sub.adcompany.net/url/to/advertisement/script.js"  async="async" defer="defer"></script>
  </aside>
</template>

<script>
    export default {
        data () {
            return {}
        }
    }
</script>
javascripthtmlwebpackvue.js
7
Watercolours

Vous ne devez pas traiter les modèles Vue comme votre code HTML final, bien que leur syntaxe soit presque identique et conforme à la syntaxe HTML.

Les modèles ne sont que des échafaudages d'interface utilisateur pour les données (c'est pourquoi on parle de paradigme piloté par les données). Ils sont analysés et transformés en fonctions de rendu qui produiront l’arbre DOM final et réactif. Au cours de ce processus, les balises <script> sont effectivement omises car ce n’est pas un lieu propice à une logique.

Cependant, si vous avez vraiment besoin d'intégrer un script tiers dans votre composant, il existe un moyen astucieux de le faire.

Tout d'abord, créez un conteneur pour le script:

<template>
    <div id="component-root">
        <!-- (...) -->
        <div v-el:script-holder></div>
    </div>
</template>

Créez ensuite dynamiquement la balise <script> et insérez-la directement dans l'arborescence DOM (à l'aide de Vanilla JS pur):

<script>
    export default {
        data () {
            return {};
        },
        ready() {
             let scriptEl = document.createElement('script');
             scriptEl.setAttribute('src', 'https://cdn.com/somescript.js');
             scriptEl.setAttribute('data-some-param', 'paramvalue');
             this.$els.scriptHolder.appendChild(scriptEl);
        },
    }
</script>

Le this.$els.scriptHolder renvoie l'élément DOM réel, l'appel de la appendChild() oblige le navigateur à insérer un nœud DOM et à exécuter le script comme lors du rendu du code HTML ordinaire.

Au lieu de $els, vous pouvez également utiliser $el qui renverrait l'élément DOM racine du composant (dans cet exemple, le <div id="component-root">) ou même le $root.$el renvoyant l'élément DOM racine de Vue App.

Notez que this.$els est une fonctionnalité de Vue 1 remplacée par $refs dans Vue 2: https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

4
Krzysiek

J'ai créé un composant vue pour gérer le chargement de script dans les balises de modèle.

Personnellement, je l’utilise pour charger des annonces dans mes applications vuejs.

ici:

https://github.com/TheDynomike/vue-script-component

2
Michael Hernandez

Vous pouvez essayer avec ce paquet

https://www.npmjs.com/package/vue-script2

2
Miguel Angel Arenas Correa