NodeJS 使用insertAdjacentHTML()注入的脚本未执行

6g8kf2rb  于 2023-01-08  发布在  Node.js
关注(0)|答案(3)|浏览(213)

在我的应用中,我从客户端向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);

但脚本不执行。
是否可以使用此方法注入脚本?

ffscu2ro

ffscu2ro1#

来自官方HTML5规范:
使用innerHTML插入的脚本元素在插入时不执行。
插入相邻的HTML与修改特定DOM元素的innerHTML相同。
如果你真的想从你的服务器返回一个html,css和javascript的混合体,你可能想把每个部分放进一个各自的属性中。{"js": "<Some js here">, "html": "<Some markup here>", "css": "<Some styles here>"}然后,在客户端,您可以创建一个script标记并将您的逻辑内联到其中:

var script = document.createElement('script');
script.textContent = data.js;
document.body.appendChild(script);

样式可以用类似的方式处理:

var style = document.createElement('style');
style.textContent = data.css;
document.head.appendChild(style);

最后,可以通过innerHTML更改标记,但请记住,这不会删除附加到DOM元素的任何事件处理程序,这些DOM元素在解析新HTML后将被新元素替换:

var someNode = document.querySelector('<some selector>');
someNode.innerHTML = data.html;
bihw5rsg

bihw5rsg2#

正如许多答案所指出的,试图直接将脚本作为文本插入会阻止它运行。下面是一个有效的方法:

const divFragment = document.createRange().createContextualFragment(`${json}`);
document.body.prepend(divFragment);

资料来源:

i7uaboj4

i7uaboj43#

是的,您可以将insertAdjacentHTML与任何
欲了解更多信息,请访问此页面
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
在您的实现中,我认为您不必在服务器端创建DOM,只需在JS中获取响应并在客户端创建DOM即可
喜欢

var p = document.createElement("p");
p.text = 'My new Paragraph :)'

function myFunction() {
  var h = document.getElementById("myH2");
  h.insertAdjacentHTML("afterend", p.text);
}
<h2 id="myH2">My Header</h2>
<button onclick="myFunction()">Insert a paragraph</button>

相关问题