Skip to content

Instantly share code, notes, and snippets.

@p2004a
Created November 19, 2014 22:05
Show Gist options
  • Save p2004a/28981ba3f2f9ec199f99 to your computer and use it in GitHub Desktop.
Save p2004a/28981ba3f2f9ec199f99 to your computer and use it in GitHub Desktop.
Simple iframe js runner
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe runner</title>
<script src="http://ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajaxorg.github.io/ace-builds/src-min-noconflict/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script src="main.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p>Pres Ctrl+Enter to run code</p>
<div id="editor" style="width: 500px; height: 180px;">window.onload = function () {
document.body.innerText = "Hello World!";
};</div>
<iframe id="frame" sandbox="allow-scripts allow-popups" style="border: 1px solid black; width:500px; height:500x;"></iframe>
</body>
</html>
window.onload = function () {
'use strict';
var $frame = document.getElementById('frame');
function execCode(script) {
var html = "<html><head><script>" + script + "</script></head><body><body></html>";
$frame.src = "data:text/html;encoding=utf8;base64," + btoa(html);
}
ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setOptions({
enableBasicAutocompletion: true,
enableLiveAutocompletion: true
});
editor.setTheme("ace/theme/tomorrow");
editor.getSession().setMode("ace/mode/javascript");
editor.commands.addCommand({
name: "execjs",
bindKey: {
win: "Ctrl-Enter",
mac: "Command-Enter"
},
exec: function(editor) {
var code = editor.getValue();
execCode(code);
},
readOnly: true
});
editor.commands.exec("execjs", editor);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment