在我的应用中,我从客户端向node.js服务器发送一个请求,服务器发送一个包含脚本的HTML响应:
app.post('/verify', cors(issue2options), async (req, res) => {
let auth = await mongo({
input: 'express app',
data: req.body['auth']['address'],
type: 'verify'
}, 'get', 'type')
if (empty(auth)) {
res.send(JSON.stringify(`
<div id="registration" slot="varan-about">
Войдите под аккаунтом администратора
<script type="module">
console.log('sssss');
</script>
</div>
`));
} else {
res.send(true)
}
})
在客户机上,我使用insertAdjacentHTML
将响应注入document.body
:
document.body.insertAdjacentHTML('afterbegin', json);
但脚本不执行。
是否可以使用此方法注入脚本?
3条答案
按热度按时间ffscu2ro1#
来自官方HTML5规范:
使用innerHTML插入的脚本元素在插入时不执行。
插入相邻的HTML与修改特定DOM元素的
innerHTML
相同。如果你真的想从你的服务器返回一个html,css和javascript的混合体,你可能想把每个部分放进一个各自的属性中。
{"js": "<Some js here">, "html": "<Some markup here>", "css": "<Some styles here>"}
然后,在客户端,您可以创建一个script标记并将您的逻辑内联到其中:样式可以用类似的方式处理:
最后,可以通过
innerHTML
更改标记,但请记住,这不会删除附加到DOM元素的任何事件处理程序,这些DOM元素在解析新HTML后将被新元素替换:bihw5rsg2#
正如许多答案所指出的,试图直接将脚本作为文本插入会阻止它运行。下面是一个有效的方法:
资料来源:
i7uaboj43#
是的,您可以将
insertAdjacentHTML
与任何欲了解更多信息,请访问此页面
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
在您的实现中,我认为您不必在服务器端创建DOM,只需在JS中获取响应并在客户端创建DOM即可
喜欢