模板中包含腳本標記的廣告[Vue.js]

在我們的項目中，我們以前一直使用Thymeleaf，但現在我們轉向Vue.js，我們遇到了一些使用相同廣告腳本的問題。腳本看起來像這樣。我只更改了網址。模板中包含腳本標記的廣告[Vue.js]

<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以下消息：

模板應該只負責狀態映射到用戶界面。避免在模板中放置帶副作用的標籤，如，因爲它們不會被解析。

所以我一直在谷歌搜索找到一個類似的情況。有一些插件可以爲Google廣告做這件事，但它們不適合我們。轉義腳本標記<\/script>以某種方式工作，但隨後腳本不會添加到DOM，直到加載後，因此它不會運行。

有沒有人遇到類似的問題？如果是這樣，你的解決方案是什麼？

Vue的文件看起來是這樣的：

<template> <aside class="sidebar-ad ui-wide"> <script data-adfscript="adx.adform.net/adx/?mid=256746"></script> <script src="//s1.adform.net/banners/scripts/adx.js" async="async" defer="defer"></script> </aside> </template> <script> export default { data() { return {} } } </script>

來源

2017-08-08 Watercolours

添加這些腳本在您的index.html文件 –

是的，我能做到這一點，但後來我不得不編寫一個腳本來移動我需要的廣告。我想要避免。 – Watercolours

ohk ..你也有這種實現... –

你可以用這個包嘗試

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

來源

2017-08-10 15:41:25

它不適用於*單文件組件*和* webpack *，因爲它使用'render（）'函數。我可以重寫整個軟件包以適合我的項目，但我希望能避免這種情況。 – Watercolours

你不應該把Vue的模板作爲最終的HTML，雖然它們的語法是近相同並且也符合HTML語法。

模板只是數據的UI腳手架（這就是爲什麼它被稱爲數據驅動範例）。他們被解析並轉換成渲染函數，最終將產生最終的和被動的DOM樹。在這個過程中，<script>標籤實際上是不受歡迎的，因爲它不是任何邏輯發生的地方。

但是，如果您確實需要在您的組件中嵌入任何第三方腳本，則可以使用這種方法。

首先，腳本創建容器：

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

然後動態地創建<script>標籤，然後直接插入到DOM樹（使用純香草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你也可以使用$el這將使該組件的根DOM元素（在這個例子中<div id="component-root">）甚至$root.$el這將返回Vue的應用程序根DOM元素。

注意this.$els是Vue公司1功能，這在Vue公司2被替換$refs：https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

來源

2017-10-30 20:29:15 Krzysiek

模板中包含腳本標記的廣告[Vue.js]

回答

相關問題