我正在尝试使过程更加动态。我有一些外部的JS代码，我想使用美化器，但是当我尝试使用其中的一个代码时，我只是使Javascript的URL指向同一页面。任何帮助将不胜感激。
http://myhost.com/beautifier.html?u=http://javascriptlink
以下是我对beautifier.html的修改版本
<!DOCTYPE html>
<html lang="en"> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Enter your compressed, minified, or obfuscated javascript and get clean, well-formatted code.">
<meta name="keywords" content="viewer,formatter,editor,javascript beautifier, javascript formatter, format javascript, beautify javascript, js, jquery">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<link rel="shortcut icon" href="//dpidudyah7i0b.cloudfront.net/favicon.ico" type="image/x-icon">
<link rel="icon" href="//dpidudyah7i0b.cloudfront.net/favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="/bootsnipp-layout/bootsnipp.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-bootsnipp animate" role="navigation" style="z-index: 9999999">
<div class="container">
<div class="container" style="margin-top:30px;margin-bottom:20px;">
<div class="col-md-9 col-xl-10">
<br/>
<link rel="stylesheet" href="//dpidudyah7i0b.cloudfront.net/css/codemirror.css">
<script src="//dpidudyah7i0b.cloudfront.net/js/jquery.cookie.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/lib/codemirror.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/js/formatting.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/mode/css/css.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/addon/display/placeholder.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/addon/display/fullscreen.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/mode/clike/clike.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/mode/xml/xml.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/mode/javascript/javascript.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/mode/php/php.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/mode/perl/perl.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/mode/python/python.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/mode/go/go.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/mode/sql/sql.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/mode/ruby/ruby.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/jsb/lib/beautify.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/jsb/lib/beautify-css.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/jsb/lib/beautify-html.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/jsb/test/sanitytest.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/jsb/test/beautify-tests.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/jsb/lib/unpackers/javascriptobfuscator_unpacker.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/jsb/lib/unpackers/urlencode_unpacker.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/jsb/lib/unpackers/p_a_c_k_e_r_unpacker.js"></script>
<script src="//dpidudyah7i0b.cloudfront.net/codemirror/jsb/lib/unpackers/myobfuscate_unpacker.js"></script>
<style>
.column center h2 {
display:none;
}
.CodeMirror-fullscreen {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
height: auto;
z-index: 9;
}
.CodeMirror {
border: 1px solid #cccccc;
height:500px;
}
/* .CodeMirror-empty { outline: 1px solid #c22; } */
.CodeMirror-empty.CodeMirror-focused { outline: none; }
.CodeMirror pre.CodeMirror-placeholder {
font-size: 2em;
color: #999;
}
.CodeMirror-scroll {height: 100%; overflow-y: auto; overflow-x: auto;}
</style>
<form>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<textarea class="form-control" name="code" id="code" rows="40" placeholder="Enter the Javascript you want to Beautify..."></textarea>
</div>
<br/>
<a id="cap" href="javascript:beautify();" class="btn btn-primary btn-large listen">
<i class="icon-indent-left icon-white"></i>Format Code</a>
</div>
<div class="col-sm-12">
<hr>
<h4>Options:</h4>
<div class="col-md-4">
<select name="tabsize" id="tabsize" class="form-control">
<option value="1">Indent with a tab character</option>
<option value="2">Indent with 2 spaces</option>
<option value="3">Indent with 3 spaces</option>
<option value="4">Indent with 4 spaces</option>
<option value="8">Indent with 8 spaces</option>
</select>
<br/>
</div>
<div class="col-md-4">
<select name="max-preserve-newlines" id="max-preserve-newlines" class="form-control">
<option value="-1">Remove all extra newlines</option>
<option value="1">Allow 1 newline between tokens</option>
<option value="2">Allow 2 newlines between tokens</option>
<option value="5">Allow 5 newlines between tokens</option>
<option value="10">Allow 10 newlines between tokens</option>
<option value="0">Allow unlimited newlines between tokens</option>
</select>
<br/>
</div>
<div class="col-md-4">
<select name="wrap-line-length" id="wrap-line-length" class="form-control">
<option value="0">Do not wrap lines</option>
<option value="40">Wrap lines near 40 characters</option>
<option value="70">Wrap lines near 70 characters</option>
<option value="80">Wrap lines near 80 characters</option>
<option value="110">Wrap lines near 110 characters</option>
<option value="120">Wrap lines near 120 characters</option>
<option value="160">Wrap lines near 160 characters</option>
</select>
<br/>
</div>
<div class="col-md-4">
<select id="brace-style" class="form-control">
<option value="collapse">Braces with control statement</option>
<option value="expand">Braces on own line</option>
<option value="end-expand">End braces on own line</option>
</select>
<br/>
</div>
<div class="col-md-12">
<p style="margin:6px 0 0 0" class="pull-left"><b><u>HTML <style>, <script> formatting:</u></b></p>
</div>
<div class="col-md-4">
<select id="indent-scripts" class="form-control">
<option value="keep">Keep indent level of the tag</option>
<option value="normal">Add one indent level</option>
<option value="separate">Separate indentation</option>
</select>
<br/>
</div>
<div class="col-md-4">
<label for="end-with-newline"><input type="checkbox" id="end-with-newline"> End script and style with newline?</label>
</div>
<div class="col-md-4">
<label for="detect-packers"><input type="checkbox" id="detect-packers"> Detect packers and obfuscators?</label>
</div>
<div class="col-md-4">
<label for="keep-array-indentation"><input type="checkbox" id="keep-array-indentation"> Keep array indentation?</label>
</div>
<div class="col-md-4">
<label for="break-chained-methods"><input type="checkbox" id="break-chained-methods"> Break lines on chained methods?</label>
</div>
<div class="col-md-4">
<label for="space-before-conditional"><input type="checkbox" id="space-before-conditional"> Space before conditional: "if(x)" / "if (x)"</label>
</div>
<div class="col-md-4">
<label for="unescape-strings"><input type="checkbox" id="unescape-strings"> Unescape printable chars encoded as \xNN or \uNNNN?</label>
</div>
<div class="col-md-4">
<label for="jslint-happy"><input type="checkbox" id="jslint-happy"> Use JSLint-happy formatting tweaks?</label>
</div>
</div>
</div>
</form>
</div>
<hr/>
<script>
var the = {
use_codemirror: (!window.location.href.match(/without-codemirror/)),
beautify_in_progress: false,
editor: null // codemirror editor
};
function run_tests() {
var st = new SanityTest();
run_beautifier_tests(st, Urlencoded, js_beautify, html_beautify, css_beautify);
JavascriptObfuscator.run_tests(st);
P_A_C_K_E_R.run_tests(st);
Urlencoded.run_tests(st);
MyObfuscate.run_tests(st);
var results = st.results_raw()
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/ /g, ' ')
.replace(/\r/g, '·')
.replace(/\n/g, '<br>');
$('#testresults').html(results).show();
}
function any(a, b) {
return a || b;
}
function unpacker_filter(source) {
var trailing_comments = '',
comment = '',
unpacked = '',
found = false;
// cut trailing comments
do {
found = false;
if (/^\s*\/\*/.test(source)) {
found = true;
comment = source.substr(0, source.indexOf('*/') + 2);
source = source.substr(comment.length).replace(/^\s+/, '');
trailing_comments += comment + "\n";
} else if (/^\s*\/\//.test(source)) {
found = true;
comment = source.match(/^\s*\/\/.*/)[0];
source = source.substr(comment.length).replace(/^\s+/, '');
trailing_comments += comment + "\n";
}
} while (found);
var unpackers = [P_A_C_K_E_R, Urlencoded, /*JavascriptObfuscator,*/ MyObfuscate];
for (var i = 0; i < unpackers.length; i++) {
if (unpackers[i].detect(source)) {
unpacked = unpackers[i].unpack(source);
if (unpacked != source) {
source = unpacker_filter(unpacked);
}
}
}
return trailing_comments + source;
}
function read_settings_from_cookie() {
$('#tabsize').val(any($.cookie('tabsize'), '4'));
$('#brace-style').val(any($.cookie('brace-style'), 'collapse'));
$('#detect-packers').prop('checked', $.cookie('detect-packers') !== 'off');
$('#max-preserve-newlines').val(any($.cookie('max-preserve-newlines'), '5'));
$('#keep-array-indentation').prop('checked', $.cookie('keep-array-indentation') === 'on');
$('#break-chained-methods').prop('checked', $.cookie('break-chained-methods') === 'on');
$('#indent-scripts').val(any($.cookie('indent-scripts'), 'normal'));
$('#space-before-conditional').prop('checked', $.cookie('space-before-conditional') !== 'off');
$('#wrap-line-length').val(any($.cookie('wrap-line-length'), '0'));
$('#unescape-strings').prop('checked', $.cookie('unescape-strings') === 'on');
$('#jslint-happy').prop('checked', $.cookie('jslint-happy') === 'on');
$('#end-with-newline').prop('checked', $.cookie('end-with-newline') === 'on');
}
function store_settings_to_cookie() {
var opts = {
expires: 360
};
$.cookie('tabsize', $('#tabsize').val(), opts);
$.cookie('brace-style', $('#brace-style').val(), opts);
$.cookie('detect-packers', $('#detect-packers').prop('checked') ? 'on' : 'off', opts);
$.cookie('max-preserve-newlines', $('#max-preserve-newlines').val(), opts);
$.cookie('keep-array-indentation', $('#keep-array-indentation').prop('checked') ? 'on' : 'off', opts);
$.cookie('break-chained-methods', $('#break-chained-methods').prop('checked') ? 'on' : 'off', opts);
$.cookie('space-before-conditional', $('#space-before-conditional').prop('checked') ? 'on' : 'off',
opts);
$.cookie('unescape-strings', $('#unescape-strings').prop('checked') ? 'on' : 'off', opts);
$.cookie('jslint-happy', $('#jslint-happy').prop('checked') ? 'on' : 'off', opts);
$.cookie('end-with-newline', $('#end-with-newline').prop('checked') ? 'on' : 'off', opts);
$.cookie('wrap-line-length', $('#wrap-line-length').val(), opts);
$.cookie('indent-scripts', $('#indent-scripts').val(), opts);
}
function beautify() {
if (the.beautify_in_progress) return;
store_settings_to_cookie();
the.beautify_in_progress = true;
var source = the.editor ? the.editor.getValue() : $('#code').val(),
output,
opts = {};
opts.indent_size = $('#tabsize').val();
opts.indent_char = opts.indent_size == 1 ? '\t' : ' ';
opts.max_preserve_newlines = $('#max-preserve-newlines').val();
opts.preserve_newlines = opts.max_preserve_newlines !== "-1";
opts.keep_array_indentation = $('#keep-array-indentation').prop('checked');
opts.break_chained_methods = $('#break-chained-methods').prop('checked');
opts.indent_scripts = $('#indent-scripts').val();
opts.brace_style = $('#brace-style').val();
opts.space_before_conditional = $('#space-before-conditional').prop('checked');
opts.unescape_strings = $('#unescape-strings').prop('checked');
opts.jslint_happy = $('#jslint-happy').prop('checked');
opts.end_with_newline = $('#end-with-newline').prop('checked');
opts.wrap_line_length = $('#wrap-line-length').val();
if (looks_like_html(source)) {
output = html_beautify(source, opts);
} else if (the.editor.options.mode == 'css') {
output = css_beautify(source);
} else {
if ($('#detect-packers').prop('checked')) {
source = unpacker_filter(source);
}
output = js_beautify(source, opts);
}
if (the.editor) {
the.editor.setValue(output);
} else {
$('#code').val(output);
}
the.beautify_in_progress = false;
}
function looks_like_html(source) {
// <foo> - looks like html
// <!--\nalert('foo!');\n--> - doesn't look like html
var trimmed = source.replace(/^[ \t\n\r]+/, '');
var comment_mark = '<' + '!-' + '-';
return (trimmed && (trimmed.substring(0, 1) === '<' && trimmed.substring(0, 4) !== comment_mark));
}
$(function () {
read_settings_from_cookie();
$('select').change(beautify);
});
</script>
</div>
<script>
$(function () {
the.editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
mode: "javascript",
extraKeys: {
"F11": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
var browserHeight = document.documentElement.clientHeight;
the.editor.getWrapperElement().style.height = (0.5 * browserHeight)+ 'px';
the.editor.refresh();
function autoFormat(t) {
CodeMirror.commands["selectAll"](editor);
editor.autoFormatRange(editor.getCursor(true), editor.getCursor(false));
editor.setCursor(0);
}
});
</script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</script>
</body>
</html>
这是我的加密javascript代码的示例：
// This is just a sample script. Paste your real code (javascript or HTML) here.
if ('this_is'==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}
说明示例：
我已经托管了代码here
如您所见，它具有输入Javascript代码的位置，因此我将在输入框中输入代码
if ('this_is'==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}
之后，我将点击格式代码 然后它会很漂亮 所以我想做的是使过程动态化，除了手动 JS代码将托管在其他地方，我只想输入托管JS代码的网址，然后页面就会使其漂亮