Vue js在编译时正在删除脚本标签

Posted 2023-02-23

【中文标题】Vue js在编译时正在删除脚本标签

【英文标题】：Vue js is deleting a script tag when compiled

【发布时间】：2019-05-20 02:08:30

【问题描述】：

我是 Vue.js 的新手，我遇到了一个我无法解决的问题。我正在使用 Vue cli 3，在我的代码中，我在我的代码中添加了一个自定义标签（不是组件）模板里面有一个脚本标签。

<ra type="outstream" pid="888666574" ra_init="open" ra_end="open" skin="dark" hasConsent="1">
    <script type="text/javascript" src="https://s.test.com/script.js"></script>
</ra>

此脚本用于搜索自定义标签 ra，因此需要在标签内。问题是当我使用 devTools 检查站点时，ra 标签是空的。我的意思是，脚本不存在。我认为可能 Vue 正在删除脚本以防止 XSS 或类似情况，但我需要运行此脚本。

有人知道发生了什么吗？

谢谢！ :)

【问题讨论】：

***.com/questions/45561612/…

【参考方案1】：

mounted() 
  let script = document.createElement('script');
  script.setAttribute('src', 'https://s.test.com/script.js');

  let wrapper = document.createElement('ra');
  wrapper.appendChild(script);
  wrapper.setAttribute('pid','888666574');
  wrapper.setAttribute('ra_init','open');
  wrapper.setAttribute('ra_end','open');
  wrapper.setAttribute('skin','dark');
  wrapper.setAttribute('hasConsent','1');
  document.body.appendChild(wrapper);
  

试试这个希望对你有帮助

【讨论】：

我认为这可行。问题是我需要在 ajax 调用之后调用它，并且我需要使用响应设置一个变量，所以脚本将采用这个 var。可以使用挂载功能吗？

尝试将其添加到自定义函数中，并在 ajax 调用成功时调用此函数。我认为它会成功，但说实话我从未尝试过

你的意思是添加你在函数中编写的这段代码，并在它被挂载和ajax调用之后调用它？

不，您将此代码而不是挂载的钩子添加到方法中。当您想将其添加到 dom 时，您调用该方法。在您的情况下，当 ajax 调用完成时

它会执行脚本吗？因为我按照你说的试过了，脚本现在出现在DOM中，但是没有被执行

【参考方案2】：

只需在模板标签中嵌入脚本标签。所以 VueJs 不会删除这些脚本标签

<template>
    <script></script>
</template>