web-dev-qa-db-ja.com

テンプレートにスクリプトタグを含む広告[Vue.js]

このプロジェクトでは、以前にThymeleafを使用していましたが、Vue.jsに移行したため、同じ広告スクリプトを使用していくつかの問題が発生しています。スクリプトは次のようになります。 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>

これらのタグを<template>、Webpackは次のメッセージを表示します。

テンプレートは、状態をUIにマッピングすることのみを担当する必要があります。解析されないため、テンプレートなどに副作用のあるタグを配置しないでください。

それで、私はグーグルで同じようなケースを見つけました。 Google広告用にこれを行うプラグインがいくつかありますが、それらは機能しません。スクリプトタグのエスケープ<\/script>は機能しますが、スクリプトはafterロードされるまでDOMに追加されないため、実行されません。

誰かが同様の問題に遭遇しましたか？もしそうなら、あなたの解決策は何でしたか？

Vueファイルは次のようになります。

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

Vueテンプレートを最終的なHTMLとして扱うべきではありませんが、それらの構文はほぼ同一であり、HTML構文にも準拠しています。

テンプレートは、データのUIの足場にすぎません（そのため、データ駆動型パラダイムと呼ばれています）。それらは解析され、最終的にはリアクティブなDOMツリーを生成するレンダー関数に変換されます。このプロセスの間、<script>タグは実際には省略されます。これは、ロジックが発生する場所ではないためです。

ただし、コンポーネント内にサードパーティのスクリプトを本当に埋め込む必要がある場合は、これを行うきちんとした方法があります。

最初に、スクリプトのコンテナを作成します。

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

次に、動的に<script>タグを作成し、DOMツリーに直接挿入します（純粋な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は実際のDOM要素を返し、appendChild()を呼び出すと、ブラウザにDOMノードを挿入させ、通常のHTMLコードのレンダリング時と同じようにスクリプトを実行させます。

$elsの代わりに、コンポーネントルートDOM要素（この例では$el）を返す<div id="component-root">またはVueアプリルートDOM要素を返す$root.$elを使用することもできます。

this.$elsはVue 1の機能であり、Vue 2：の$refsに置き換えられていることに注意してください： https://vuejs.org/v2/guide/migration.html ＃v-el-and-v-ref-replaced

5
Krzysiek

このパッケージで試すことができます

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

4
Miguel Angel Arenas Correa

vueコンポーネントを作成して、テンプレートタグ内のスクリプトの読み込みを処理しました。

個人的には、vuejsアプリに広告を読み込むために使用します。

ここに：

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

2
Michael Hernandez