使用cors跨域取到相关的html片段后，html里的js失效了怎么还原？

Question

//js:

fetch('http://localhost:8000/cors', { // 目前的端口号是5000，也是localhost，跨域端口号是8000
        mode: 'cors'
    })
        .then(res => res.text())
        .then(data => {            console.log(data);            document.body.innerHTML += data;
        })
        .then(err => console.log(err));

//取到的HTML片段

//cors.js

let btn = document.querySelector('input[type=button]');
btn.onclick = function () {    let div = document.createElement('div');
    div.classList.add('box');    document.body.append(div);    console.log(div)
};

页面样式和DOM结构出来了，但是js却不生效，有什么办法还原获取到的html原本的js吗？

Answer 1

浏览器的安全策略限制,innerHTML 中的script是不会执行的。你需要手动把script标签分离出来，单独createElement一个script出来。试试innerHtml后加个这个data.replace(/\<script&nbsp;src=\"(.*?)\"\>\<\/script\>/g,&nbsp;function(a,&nbsp;v)&nbsp;{&nbsp;&nbsp;if&nbsp;(v)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;s&nbsp;=&nbsp;document.createElement('script'); &nbsp;&nbsp;&nbsp;&nbsp;s.src&nbsp;=&nbsp;v; &nbsp;&nbsp;&nbsp;&nbsp;document.body.append(s); &nbsp;&nbsp;} });