模板中带有脚本标签的广告 [Vue.js]

Posted 2023-02-22

【中文标题】模板中带有脚本标签的广告 [Vue.js]

【英文标题】：Ads with script tags in template [Vue.js]

【发布时间】：2018-01-15 15:03:49

【问题描述】：

在我们的项目中，我们之前一直在使用 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 Ads 执行此操作，但它们不适用于我们。转义脚本标签<\/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>

【问题讨论】：

将这些脚本添加到您的 index.html 文件中

是的，我可以这样做，但是我必须编写一个脚本，将广告移动到我需要的位置。我想避免。

哦……你也有那个实现……

嘿，你有没有让这个工作？我现在在同一条船上，找不到好的解决方案。

不，很遗憾没有。我最终将广告放在 Vue 代码之外，因为我没有时间或资源来继续寻找好的解决方案。

【参考方案1】：

你可以试试这个包

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

【讨论】：

它不适用于单文件组件和webpack，因为它使用render()函数。我可以重写整个包以适应我的项目，但我希望我可以避免这种情况。

【参考方案2】：

您不应该将 Vue 模板视为您的最终 HTML，尽管它们的语法几乎相同并且也符合 HTML 语法。

模板只是数据的 UI 支架（这就是它被称为数据驱动范式的原因）。它们被解析并转换为渲染函数，最终将生成最终的响应式 DOM 树。在这个过程中，<script> 标签确实被省略了，因为它不是任何逻辑发生的地方。

但是，如果您确实需要在组件中嵌入任何第 3 方脚本，则有一种巧妙的方法可以做到这一点。

首先，为脚本创建容器：

<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，您还可以使用$el，它会返回组件的根DOM元素（在本例中为<div id="component-root">），甚至是$root.$el，它会返回Vue App的根DOM元素。

请注意，this.$els 是 Vue 1 的一项功能，在 Vue 2 中已替换为 $refs：https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

【讨论】：

对于更新后的 Vue 2 语法，请改用属性ref：vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

【参考方案3】：

我制作了一个 vue 组件来处理模板标签内的脚本加载。

就我个人而言，我用它在我的 vuejs 应用中加载广告。

这里：

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

【讨论】：

我用过这个，它非常有帮助。它也适用于我的单文件组件。

【参考方案4】：

有解决办法。也适用于style 标签。

<component is="script" src="https://www.example.com/example.js" async></component>