模板中包含脚本标记的广告[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]

回答

相关问题