如何在不使用 eval() 的情况下从服务器动态加载和执行 Javascript？答案

【问题标题】：How can I dynamically load and execute Javascript from the server without using eval()?如何在不使用 eval() 的情况下从服务器动态加载和执行 Javascript？
【发布时间】：2010-12-22 09:07:53
【问题描述】：

我正在编写一个 PHP 框架，它允许 PHP 开发人员创建带有表单、网格、选项卡面板和菜单的 ExtJS 接口使用 PHP 类仅限。

例如，为了创建一个 TabPanel，PHP 类 被实例化为 一个 URL 数组，当用户单击选项卡标题。

为了做到这一点，我使用了以下 Javascript 函数，该函数通过 AJAX 调用加载 PHP 页面并在其中执行任何脚本。

function loadViewViaAjax(url) {
    Ext.Ajax.request({
        url: url,
        success: function(objServerResponse) {
            var responseText = objServerResponse.responseText;
            var scripts, scriptsFinder=/<script[^>]*>([\s\S]+)<\/script>/gi;
            while(scripts=scriptsFinder.exec(responseText)) {
                eval(scripts[1]);
            }
        }
    });
}

我经常读到as in the answers to this question，通常不需要使用 eval()，因为您需要使用 eval() 做的事情通常可以通过其他方式实现强>。我也明白，在通过 AJAX 加载的 PHP 页面中执行脚本会带来安全风险，需要以其他方式锁定，所以如果可能的话，我想找到另一种更安全的方法。

在没有 eval() 的情况下从服务器动态加载和执行 javascript 的另一种方法是什么，这样我就可以拥有与上面脚本相同的功能，即从加载和执行 Javascript 的 TabPanels仅在单击选项卡标题时服务器？

【问题讨论】：

标签： php javascript ajax extjs eval

【解决方案1】：

您始终可以通过脚本注入加载额外的 Javascript。如果您创建一个新的 SCRIPT 元素并将其放置在 DOM 中，浏览器将下载该脚本并执行它。作为一个简化的例子，你可以使用这个：

var newScript = document.createElement('script'); 
newScript.setAttribute('src', 'http://www.example.com/url/of/your/script.php'); 
document.body.appendChild(newScript);

如果您想要更安全的方法，我建议您研究“JSONP”。

【讨论】：

感谢 JSONP 的想法，这里有一个很好的解释：remysharp.com/2007/10/08/what-is-jsonp

【解决方案2】：

您可以在服务器响应中返回脚本的文件 URL（甚至是临时文件）。使用此 URL，您可以将这些脚本动态添加到您的脑海中。如果这很复杂，您还可以返回文本并通过以下方式包含此内容：

var head = document.getElementsByTagName('head').item(0);
var script = document.createElement('script');
    script.language = "javascript";
    script.type = "text/javascript";
    script.id = "script-id";
    script.defer = true;
    script.text = source;

    head.appendChild(script);

我希望这会有所帮助。

【讨论】：

【解决方案3】：

eval 的替代方法是，将代码包装在函数体中并调用该函数，尽管它并不安全。

var body = "you source here";

var f = Function(body);

f();

这可用于加载可重用的代码段。

【讨论】：