Question

我有一个用PHP编写的后端API（带Laravel），它有一个特定的控制器接收一个ID，做一些数据库动作来检索一些数据，然后填充一个动态的js代码（简单地将它作为一个字符串附加到变量，并根据DB结果返回）并将此代码作为字符串返回然而，在客户端，我愿意实现的是，在网站的每个入口处，将向该API端点发送ajax调用，并且将动态js代码片段附加到DOM（并将被执行）当然也是。）目前，API运行良好，并返回我愿意的确切代码，在客户端，我可以通过简单的xhr请求获取它并将其附加到DOM，但唯一的问题是它没有执行。

API调用的当前JS代码：

<script>
    const url = 'http://127.0.0.1:8000/api/campaigns/1/1'; // get campaign

    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.send();
    xhr.onreadystatechange = processRequest;

    function processRequest(e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let response = xhr.responseText;
            let div = document.getElementById('campaigns');
            div.insertAdjacentHTML( 'beforeend', response );
        }
    }
</script>

响应是一个字符串，其中包含要附加（并执行）的全新脚本。

Answer 1

每次收到代码时都可以动态创建脚本元素并将其附加到正文中：

<script>
    const url = 'http://127.0.0.1:8000/api/campaigns/1/1'; // get campaign
    var globalEval = eval;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.send();
    xhr.onreadystatechange = processRequest;

    function processRequest(e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let respondedJSCode = xhr.responseText;
            try {
                if(respondedJSCode){
                    let script = document.createElement('script');
                    script.text = respondedJSCode;
                    document.body.appendChild(script);
                }
            } catch (e) {
                console.log(e);
            }
        }
    }
</script>

Answer 2

您可以使用动态脚本执行来执行此操作

const url = 'http://127.0.0.1:8000/api/campaigns/1/1'; // get campaign

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.send();
xhr.onreadystatechange = processRequest;

function processRequest(e) {
    if (xhr.readyState === 4 && xhr.status === 200) {
        let response = xhr.responseText;

        // create a function with script

        let functionByDynamicScript= new Function(response);

        // execute the function
   functionByDynamicScript() } }

附加并处理从服务器返回的JS代码

2 个答案: