webentwicklung-frage-antwort-db.com.de

Anzeigen mit Skript-Tags in der Vorlage [Vue.js]

In unserem Projekt haben wir bereits Thymeleaf verwendet, aber jetzt, da wir zu Vue.js übergehen, haben wir einige Probleme mit den gleichen Anzeigeskripts. Die Skripte sehen so aus. Ich habe nur die URLs geändert. 

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

Wenn wir diese Tags in <template> einfügen, gibt Webpack die folgende Meldung aus:

Vorlagen sollten nur für die Zuordnung des Status zur Benutzeroberfläche verantwortlich sein. Platzieren Sie keine Tags mit Nebeneffekten in Ihren Vorlagen, z. B. , da sie nicht analysiert werden.

Also habe ich dann überall gegoogelt, um einen ähnlichen Fall zu finden. Es gibt einige Plugins, die dies für Google Ads tun, aber für uns funktionieren sie nicht. Die Flucht der Skript-Tags <\/script> funktioniert in gewisser Weise, aber das Skript wird erst dann in das DOM eingefügt, wenn after geladen ist, und daher nicht ausgeführt. 

Hat jemand ähnliche Probleme? Wenn ja, was war Ihre Lösung? 

Vue-Datei sieht ungefähr so ​​aus:

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

Sie sollten Vue-Vorlagen nicht als Ihren endgültigen HTML-Code behandeln, obwohl ihre Syntax nahezu identisch und auch HTML-Syntax-kompatibel ist.

Vorlagen sind nur ein UI-Gerüst für die Daten (deshalb wird es als datengesteuertes Paradigma bezeichnet). Sie werden analysiert und in Renderfunktionen umgewandelt, die am Ende den endgültigen und reaktiven DOM-Baum erzeugen. Während dieses Vorgangs werden die <script>-Tags in der Tat nicht angegeben, da hier keine Logik möglich ist.

Wenn Sie jedoch wirklich ein Drittanbieter-Skript in Ihre Komponente einbetten müssen, gibt es eine ordentliche Möglichkeit, dies zu tun.

Erstellen Sie zunächst einen Container für das Skript:

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

Dann erstellen Sie dynamisch <script>-Tag und fügen Sie es direkt in den DOM-Baum ein (mit reinem Vanilla JS):

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

this.$els.scriptHolder gibt das eigentliche DOM-Element zurück. Das Aufrufen von appendChild() zwingt den Browser, den DOM-Knoten einzufügen und das Skript genau wie beim normalen HTML-Code-Rendering auszuführen.

Anstelle von $els können Sie auch $el verwenden, um das Komponenten-Root-DOM-Element (in diesem Beispiel <div id="component-root">) oder sogar $root.$el zurückzugeben, das das Vue App-Root-DOM-Element zurückgeben würde.

Beachten Sie, dass this.$els eine Vue 1-Funktion ist, die in Vue 2 durch $refs ersetzt wurde: https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

4
Krzysiek

Ich habe eine Vue-Komponente erstellt, um das Laden von Skripts innerhalb der Vorlagen-Tags zu behandeln.

Ich persönlich nutze es, um Anzeigen in meine vuejs-Apps zu laden.

hier:

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

2

Sie können es mit diesem Paket versuchen

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