vue 后端接口返回了字符串script标签代码,怎么在当前vue文件里执行
时间: 2024-03-21 21:42:34 浏览: 128
如果后端接口返回的是一个包含 `<script>` 标签代码的字符串,可以通过以下方式实现:
1. 创建一个新的 `<script>` 标签元素。
2. 将后端接口返回的字符串赋值给新创建的 `<script>` 标签元素的 `innerHTML` 属性。
3. 将新创建的 `<script>` 标签元素添加到当前 Vue 组件的 `<head>` 标签中。
以下是代码示例:
```
export default {
mounted() {
axios.get('/api/getScriptTag').then(response => {
const head = document.getElementsByTagName('head')[0]
const scriptElement = document.createElement('script')
scriptElement.innerHTML = response.data
head.appendChild(scriptElement)
})
}
}
```
这样就可以在 Vue 组件中执行后端接口返回的 `<script>` 标签代码了。注意,如果 `<script>` 标签代码中包含外部资源的引用,需要保证这些资源是可以被访问到的,否则会导致执行失败。
相关问题
vue 后端接口返回了两个script标签代码,怎么在当前vue文件里执行
可以在 Vue 组件的 `mounted` 钩子函数中动态创建 `<script>` 标签,并将接口返回的两个 `script` 代码分别添加到 `<script>` 标签中,即可执行这两段代码。
具体实现方法如下:
```html
<template>
<div>
<!-- 页面内容 -->
</div>
</template>
<script>
export default {
mounted() {
// 动态创建 <script> 标签
const script1 = document.createElement('script')
const script2 = document.createElement('script')
script1.async = true
script1.src = 'https://www.googletagmanager.com/gtag/js?id=G-LR9XVHCN1K'
script2.innerText = `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-LR9XVHCN1K');
`
// 将 <script> 标签添加到 <head> 中
document.head.appendChild(script1)
document.head.appendChild(script2)
}
}
</script>
```
在这个组件的 `mounted` 生命周期钩子函数中,首先创建了两个 `<script>` 标签,然后将第一个 `<script>` 标签的 `async` 属性设置为 `true`,并将其 `src` 属性设置为第一个接口返回的 `script` 代码的地址;将第二个 `<script>` 标签的 `innerText` 属性设置为第二个接口返回的 `script` 代码,这里使用了模板字符串将多行代码合并为一行。最后,将两个 `<script>` 标签添加到 `<head>` 中,代码即可自动执行。
vue后端接口返回两个script代码,如:<script async src="https://www.googletagmanager.com/gtag/js?id=G-LR9XVHCN1K"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-LR9XVHCN1K'); </script>,怎么在当前的vue文件里执行
可以通过在 Vue 组件的 `mounted` 钩子函数中动态创建 `<script>` 标签,并将接口返回的两个 `script` 代码分别添加到 `<script>` 标签中,即可执行这两段代码。
具体实现方法如下:
```html
<template>
<div>
<!-- 页面内容 -->
</div>
</template>
<script>
export default {
mounted() {
// 动态创建 <script> 标签
const script1 = document.createElement('script')
const script2 = document.createElement('script')
script1.async = true
script1.src = 'https://www.googletagmanager.com/gtag/js?id=G-LR9XVHCN1K'
script2.innerText = `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-LR9XVHCN1K');
`
// 将 <script> 标签添加到 <head> 中
document.head.appendChild(script1)
document.head.appendChild(script2)
}
}
</script>
```
在这个组件的 `mounted` 生命周期钩子函数中,首先创建了两个 `<script>` 标签,然后将第一个 `<script>` 标签的 `async` 属性设置为 `true`,并将其 `src` 属性设置为第一个接口返回的 `script` 代码的地址;将第二个 `<script>` 标签的 `innerText` 属性设置为第二个接口返回的 `script` 代码,这里使用了模板字符串将多行代码合并为一行。最后,将两个 `<script>` 标签添加到 `<head>` 中,代码即可自动执行。
阅读全文