问题

Question

问题

我允许用户在文本代码编辑器中编写一些代码，例如：

var Player = function(){ 

    this.x = 0;
    this.y = 0;
    this.width = 32;
    this.height = 64;

}

Player.prototype.run = function(){
    this.x++;
}

问题

我想使用eval()执行此代码（任何javascript）？将它存储在变量或其他内容中，然后我可以遍历它并创建html实体。一些示例 PSEUDO CODE ：

loop through varables // loop through the entities that the user created.
    print varable_name // print the name of varable ("Player")
    print varable.width  // Print the varable entitiy ("32");

一些示例代码：

for (var name in this) {
    variables[name] = name;
    variables[name]=this[name]
}

function maskedEval(scr){
    var mask = {};
    for (p in this)
        mask[p] = undefined;

    // execute script in private context
    (new Function( "with(this) { " + scr + "}")).call(mask);
}

无论如何动态地执行此操作？或者有更好的方法吗？我希望你明白我在做什么。希望有人可以帮助我。

谢谢;）

Answer 1

这是通过将代码放入临时哈希JavaScript文件来处理代码的一种很好的方法;

演示：http://so.ghostsofthesun.com/user_965921/

<强>的index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .floatClear {
            clear: both;
        }

        #userScript, #result {
            float: left;
            font-family: monospace;
            box-sizing: border-box;
            padding: 20px 15px;
            width: 500px;
            min-height: 300px;
            background-color: #333;
            color: #eee;
            border-radius: 10px;
            border: 5px solid orange;
            box-shadow: 0px 3px 5px #444;
            outline: none;
        }

        #result {
            margin-left: 20px;
        }

        #submitCode {
            margin: 20px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#submitCode').click(function() {
                var input = {'code' : JSON.stringify($('#userScript').val().trim())};

                $.post('process_code.php', input, function(data) {
                    $('#result').html('YES');
                    data = jQuery.parseJSON(data);
                    js_file_path = data.js_file_path;
                    $('script[data^=tmp_js]').remove();
                    $('head').append('<script data="tmp_js" src="' + js_file_path + '"><\/script>');
                });
            });
        });
    </script>
</head>
<body>
    <textarea id="userScript">var test = 21; console.log(test);</textarea>
    <div id="result">Result will be here</div>
    <div class="floatClear"></div>
    <button id="submitCode">Execute code!</button> (The left panel is editable)
</body>
</html>

<强> process_code.php

<?php
    if (isset($_POST['code'])) {
        $code = json_decode($_POST['code']);

        // Create new JS file
        $js_file = 'tmp_'.md5(microtime()).'.js';
        $handle = fopen($js_file, 'w') or die('can\'t open file');
        fwrite($handle, $code);
        fclose($handle);

        $full_path = 'http://localhost:8888/'.$js_file;

        echo json_encode(array('js_file_path' => $full_path));
    }
    else {
        echo json_encode(array('error' => 'Code wasn\'t recieved correctly.'));
    }

    // Do someting to remove the created JS-file after a certain time (cache/buffer empty)
?>

..并替换;

$full_path = 'http://so.ghostsofthesun.com/user_965921/'.$js_file;

..使用您的主机路径（或使用$_超级全局自动检测它。

当然你可以直接将代码重新路由到脚本标签中，但是当我手头有这个时，我想我会立即分享完整的shebang：）

现代浏览器会注意到添加的脚本标记，并会立即执行。 IE可能不会很好用;你可能想在不同的平台上测试它。否则，您可以在互联网上搜索脚本嵌入后调用JavaScript的方法。

输入左侧字段的其他示例;

$('#result').css({
    'font-size' : '60px',
    'color' : 'blue',
    'background' : '#aaa'
});

额外注意;

您可能希望使用$.getScript()（我刚刚发现）而不是重新绑定动态脚本标记;

$.post('process_code.php', input, function(data) {
    $('#result').html('YES');
    data = jQuery.parseJSON(data);
    js_file_path = data.js_file_path;
    $.getScript(js_file_path);
    //$('script[data^=tmp_js]').remove();
    //$('head').append('<script data="tmp_js" src="' + js_file_path + '"><\/script>');
});

如何执行eval（）代码并获取所有参数

问题

问题

一些示例代码：

1 个答案: