模板[Vue.js]中带有脚本标签的广告 [英] Ads with script tags in template [Vue.js]

问题描述

在我们的项目中，我们以前一直在使用Thymeleaf，但是现在我们移到Vue.js，我们在使用相同的广告脚本时遇到了一些问题.脚本看起来像这样.我只更改了网址.

In our project we've previously been using Thymeleaf, but now that we're moving over to Vue.js, we're experiencing some issues using the same ad scripts. The scripts look like this. I've only altered the URLs.

<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会显示以下消息:

If we put these tags in the <template>, Webpack gives the following message:

模板仅应负责将状态映射到UI. 避免在模板中放置带有副作用的标签，例如 ，因为它们不会被解析.

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.

因此，我一直在谷歌搜索中找到一个类似的案例.有一些针对Google Ads的插件，但对我们不起作用.转义脚本标签<\/script>可以以某种方式起作用，但是直到 加载后，脚本才会添加到DOM中，因此它不会运行.

So I've then been Googling all over to find a similar case. There are some plugins that do this for Google Ads, but they won't work for us. Escaping the script tags <\/script> works in a way, but then the script isn't added to the DOM until after loaded, and so it doesn't run.

有人遇到类似问题吗?如果是这样，您的解决方案是什么?

Has anyone run into similar issues? If so, what was your solution?

Vue文件如下所示:

Vue file looks something like this:

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

推荐答案

尽管Vue模板的语法几乎相同并且也符合HTML语法，但是您不应将Vue模板视为最终HTML.

You should not treat Vue templates as a your final HTML, although their syntax is nearly identical and is also HTML-syntax compliant.

模板只是数据的UI支架(这就是为什么它被称为数据驱动范例).它们被解析并转换为渲染函数，最终将产生最终的和反应性的DOM树.在此过程中，确实省略了<script>标记，因为它不是发生任何逻辑的地方.

Templates are just a UI scaffolds for the data (that is why it is called a data-driven paradigm). They get parsed and transformed into render functions that in the end will produce the final and reactive DOM tree. During this process the <script> tags are indeed ommited cause it is not a place for any logic to happen.

但是，如果您确实需要在组件中嵌入任何第三方脚本，则有一种整齐的方法.

首先，为脚本创建容器:

First, create container for the script:

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

然后动态创建<script>标签并将其直接插入到DOM树中(使用纯Vanilla JS):

Then dynamicly create <script> tag and insert it directly to the DOM tree (using pure 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代码呈现期间一样运行脚本.

The this.$els.scriptHolder returns actual DOM element, calling the appendChild() forces the browser to insert DOM node and run the script just like during ordinary HTML code rendering.

除了$els之外，您还可以使用$el返回组件根DOM元素(在本示例中为<div id="component-root">)，甚至使用$root.$el返回Vue App根DOM元素.

Instead of $els you could also use $el which would return the components root DOM element (in this example the <div id="component-root">) or even the $root.$el which would return the Vue App root DOM element.

请注意，this.$els是Vue 1功能，在Vue 2中已被$refs取代:

Note that this.$els is a Vue 1 feature, which has been replaced with $refs in Vue 2: https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

这篇关于模板[Vue.js]中带有脚本标签的广告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！