我正在尝试制作在线代码编辑器。
我有<select></select>标记，可让我在查看结果时在新窗口或iframe之间进行选择;但每当我选择iframe时它都不起作用。
我试着在stackoverflow上查找遇到同样问题的人，但我找不到任何东西。附：我不知道为什么但“运行代码片段”按钮没有正确显示所有内容。请帮帮我！
$(document).ready(function(){
var HTMLeditor = document.getElementById("HTMLeditor");
var CSSeditor = document.getElementById("CSSeditor");
var JSeditor = document.getElementById("JSeditor");
var result = document.getElementById("see-result");
var code = document.getElementById("code");
var jqueryMode = document.getElementById("jqueryMode");
var bootstrapMode = document.getElementById("bootstrapMode");
var gigaboyMode = document.getElementById("gigaboyMode");
var sizzle = document.getElementById("sizzle");
var scrnSz = document.getElementById("screenSize");
var editorStyle = document.getElementById("editorStyle");
var codes = ["JavaScript", "CSS", "Gigaboy.js", "JQuery", "Bootstrap", "HTML5", "Sizzle.js"];
var selCode = Math.floor(Math.random() * 7);
code.innerHTML = codes[selCode]
$("textarea").keydown(function(e) {
if (e.keyCode == 9) {
e.preventDefault();
var start = $(this).get(0).selectionStart;
var end = $(this).get(0).selectionEnd;
// set textarea value to: text before caret + tab + text after caret
$(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring(end));
// put caret at right position again
$(this).get(0).selectionStart =
$(this).get(0).selectionEnd = start + 1;
}
});
HTMLeditor.value = '<!DOCTYPE HTML>\n<HTML lang="en">\n\t<head>\n\t\t<meta charset="UTF-8">\n\t\t<title title="">\n\t\t\t\n\t\t</title>\n\t</head>\n\t<body>\n\t\t\n\t</body>\n</HTML>';
CSSeditor.value = 'body {\n\tbackground-color: white;\n\tmargin: auto;\n\tfont-size: 12pt;\n\tfont-family: Courier New;\n\twidth: auto;\n\theight: auto;\n}';
JSeditor.placeholder = 'Please do NOT include this.\t\t\n\nwindow.onload = function() {\n //Code\n};\t\t\n\nIt causes glitches.';
function getCode() {
HTML = HTMLeditor.value.replace(/\t+/g, "");
CSS = CSSeditor.value.replace(/\t+/g, "");
JS = JSeditor.value.replace(/\t+/g, "");
} setInterval(getCode, 750);
jqueryMode.onclick = function() {
if (jqueryMode.value == "ON") {
JSeditor.placeholder = 'Pleas do NOT include this.\t\t\n\n$("document").ready(function(){\n\ //Code\n});\t\t\n\nIt causes glitches.';
} else if (jqueryMode.value == "OFF") {
JSeditor.placeholder = 'Please do NOT include this.\t\t\n\nwindow.onload = function() {\n //Code\n};\t\t\n\nIt causes glitches.';
}
};
editorStyle.onclick = function() {
if (editorStyle.value == "default") {
HTMLeditor.style.backgroundColor = "#DEDEDE";
HTMLeditor.style.backgroundImage = "none";
HTMLeditor.style.color = "#0000DD";
CSSeditor.style.backgroundColor = "#DEDEDE";
CSSeditor.style.backgroundImage = "none";
CSSeditor.style.color = "#DD0000";
JSeditor.style.backgroundColor = "#DEDEDE";
JSeditor.style.backgroundImage = "none";
JSeditor.style.color = "#007700";
} else if (editorStyle.value == "dark") {
HTMLeditor.style.backgroundColor = "#000040";
HTMLeditor.style.backgroundImage = "none";
HTMLeditor.style.color = "#EEEE00";
CSSeditor.style.backgroundColor = "#000040";
CSSeditor.style.backgroundImage = "none";
CSSeditor.style.color = "#EE0000";
JSeditor.style.backgroundColor = "#000040";
JSeditor.style.backgroundImage = "none";
JSeditor.style.color = "#00EE00";
} else if (editorStyle.value == "classic") {
HTMLeditor.style.backgroundColor = "white";
HTMLeditor.style.backgroundImage = "none";
HTMLeditor.style.color = "#000000";
CSSeditor.style.backgroundColor = "white";
CSSeditor.style.backgroundImage = "none";
CSSeditor.style.color = "#000000";
JSeditor.style.backgroundColor = "white";
JSeditor.style.backgroundImage = "none";
JSeditor.style.color = "#000000";
} else if (editorStyle.value == "fireNight") {
HTMLeditor.style.backgroundImage = "url('http://www.creativepadphotography.com/wp-content/uploads/2015/04/star_new_low.jpg')";
HTMLeditor.style.color = "#FF9A00";
CSSeditor.style.backgroundImage = "url('http://www.creativepadphotography.com/wp-content/uploads/2015/04/star_new_low.jpg')";
CSSeditor.style.color = "#FF9A00";
JSeditor.style.backgroundImage = "url('http://www.creativepadphotography.com/wp-content/uploads/2015/04/star_new_low.jpg')";
JSeditor.style.color = "#FF9A00";
}
};
result.onclick = function() {
if (HTMLeditor.value == "" && CSSeditor.value == "" && JSeditor.value == "") {
alert("It kind of makes sense to type some code first.");
} else {
if (scrnSz.value == "iframe") {
var ifr = document.createElement("iframe");
ifr.setAttribute("id", "iframeResult");
document.getElementById("iframecontainer").innerHTML = " ">
document.getElementById("iframecontainer").appendChild(ifr);
var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
ifrw.document.open();
ifrw.document.write(HTMLeditor.value + '<style>' + CSSeditor.value + '</style>' + '<script>' + JSeditor.value + '</script>');
ifrw.document.close();
if (ifrw.document.body && !ifrw.document.body.isContentEditable) {
ifrw.document.body.contentEditable = true;
ifrw.document.body.contentEditable = false;
}
} else {
if (scrnSz.value == "MED") {
newWindow = window.open("about:blank", "window1", "width=950, height=750");
newWindow.moveTo(150, 150);
} else if (scrnSz.value == "FULL") {
newWindow = window.open("about:blank", "window1", "width=" + screen.width + ", height=" + screen.height);
newWindow.moveTo(150, 150);
} else if (scrnSz.value == "SMALL") {
newWindow = window.open("about:blank", "window1", "width=750, height=550");
newWindow.moveTo(255, 255);
}
if (jqueryMode.value == "twoTwoOne") {
newWindow.document.write('<script src="http://code.jquery.com/jquery-2.2.1.js"></script>');
} else if (jqueryMode.value == "oneTwelveOne") {
newWindow.document.write('<script src="http://code.jquery.com/jquery-1.12.1.js"></script>')
}
if (bootstrapMode.value == "ON") {
newWindow.document.write('<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">');
}
if (gigaboyMode.value == "ON") {
newWindow.document.write('<script src="http://www.gigaboywebdesigns.com/Gigaboy.js"></script>');
}
if (sizzle.value == "ON") {
newWindow.document.write('https://github.com/jquery/sizzle/blob/master/src/sizzle.js');
}
newWindow.document.write(HTMLeditor.value);
newWindow.document.write('<script>' + JSeditor.value + '</script>');
newWindow.document.write('<style>' + CSSeditor.value + '</style>');
}
}
};
ctrlS(result);
});
@font-face {
font-family: Bandits;
src: url("Bandits.ttf");
font-weight: bold;
}
#iframeResult {
position: absolute;
left: 10%;
width: 1005px;
height: 800px;
margin-bottom: 15px;
}
textarea {
position: absolute;
left: 10%;
width: 1000px;
height: 625px;
resize: none;
border: 2px solid #999;
background-attachment: fixed;
background-size: cover;
background-color: #DEDEDE;
tab-size: 3;
-moz-tab-size: 3;
-o-tab-size: 3;
-webkit-tab-size: 3;
} textarea:focus {
outline: 2px solid #999;
}
#HTMLeditor {
top: 173px;
color: #00D;
}
#CSSeditor {
top: 833px;
color: #D00;
}
#JSeditor {
top: 1493px;
color: #070;
}
#see-result {
color: black;
position: absolute;
top: 158px;
right: 12%;
width: 125px;
letter-spacing: 2.7px;
font-weight: bold;
background-color: #999;
text-align: center;
padding-top: 6.5px;
padding-bottom: 6.5px;
cursor: pointer;
font-family: Times;
} #see-result:hover {
background-color: #BCBCBC;
}
header {
text-align: center;
font-size: 75px;
font-family: Bandits;
letter-spacing: 4px;
}
body {
background-image: url("bgimage.png");
background-attachment: fixed;
color: limegreen;
}
#jqueryMode {
position: absolute;
left: 10.3%;
top: 145px;
}
#bootstrapMode {
position: absolute;
left: 19.95%;
top: 145px;
}
#gigaboyMode {
position: absolute;
left: 30.75%;
top: 145px;
}
#sizzle {
position: absolute;
left: 42.075%;
top: 145px;
}
#screenSize {
position: absolute;
left: 52.4%;
top: 145px;
}
#editorStyle {
position: absolute;
left: 62.3%;
top: 145px;
}
a {
text-decoration: none;
color: red;
}
#rightMenu {
background-color: #EFEFEF;
border-radius: 3px;
color: black;
width: 110px;
display: none;
position: absolute;
}
#share {
padding: 5.5px;
}
#fb, #tweet {
position: relative;
top: -7px;
left: 40px;
margin: 2px;
display: none;
}
hr {
border-color: lightgrey;
width: 105px;
display: none;
}
<!DOCTYPE HTML>
<HTML lang = "en-US">
<head>
<meta charset = "UTF-8">
<meta name = "author" content = "Adam S. Oates">
<meta name = "description" content = "This HTML file was created to test new thigns I learn">
<meta name = "title" content = "Online Code Editor">
<title title = "Online Code Editor">
Online Code Editor
</title>
<link rel = "apple-touch-icon" href = "">
<link rel = "shortcut icon" href = "">
<link rel = "stylesheet" type = "text/css" href = "main.css">
<script type = "text/javascript" src = "http://code.jquery.com/jquery-2.2.1.js"></script>
<script type = "text/javascript" src = "http://www.gigaboywebdesigns.com/Gigaboy.js"></script>
<script type = "text/javascript" src = "main.js"></script>
<noscript>
<h2>JavaScript is required. Look in your browser settings to enable JavaScript.</h2>
</noscript>
</head>
<body>
<section contextmenu="mymenu">
<script type = "text/javascript">
function goTo(url) { window.open(url, "shareWindow"); }
</script>
<header>
Gigaboy <span id = "code"></span> Editor
</header>
<textarea spellcheck = "false" autocomplete = "off" placeholder = "Type HTML Here" id = "HTMLeditor"></textarea>
<a id="CSS"></a>
<textarea spellcheck = "false" autocomplete = "off" placeholder = "Type CSS Here" id = "CSSeditor"></textarea>
<a id="JavaScript"></a>
<textarea spellcheck = "false" autocomplete = "off" placeholder = "Type JavaScript Here" id = "JSeditor"></textarea>
<span id = "see-result">View Result</span>
<div name = "iframecontainer"></div>
<select id = "jqueryMode">
<option value = "OFF">Disable JQuery</option>
<option value = "oneTwelveOne">Jquery 1.12.1</option>
<option value = "twoTwoOne">JQuery 2.2.1</option>
</select>
<select id = "bootstrapMode">
<option value = "OFF">Disable Bootstrap</option>
<option value = "ON">Enable Bootstrap</option>
</select>
<select id = "gigaboyMode">
<option value = "OFF">Disable Gigaboy.js</option>
<option value = "ON">Enable Gigaboy.js</option>
</select>
<select id = "sizzle">
<option value = "OFF">Disable Sizzle.js</option>
<option value = "ON">Enable Sizzle.js</option>
</select>
<select id = "screenSize">
<option value = "SMALL">Small Screen</option>
<option value = "MED">Medium Screen</option>
<option value = "FULL">Full Screen</option>
<option value = "iframe">In Frame</option>
</select>
<select id = "editorStyle">
<option value = "default">Default</option>
<option value = "dark">Dark</option>
<option value = "classic">Classic</option>
<option value = "fireNight">Fire in the Night</option>
</select>
<menu type="context" id="mymenu">
<menu label="Share...">
<menuitem label="Facebook" icon="http://images.roadscholar.org/header/facebook_icon.jpg" onclick="goTo('https://www.facebook.com/sharer/sharer.php?u=http%3A' + window.location.href);"></menuitem>
<menuitem label="Tweet" icon="http://www.wolffgames.com/images/twitter_icon.png" onclick="goTo('http://twitter.com/intent/tweet?text=' + document.title + ': ' + window.location.href);"></menuitem>
<menuitem label="Google+" icon="http://blogs.findlaw.com/blotter/images/google-plus.png" onclick="goTo('https://plus.google.com/share?url=' + window.location.href);"></menuitem>
<menuitem label="Pinterest" icon="data:image/jpeg;base64,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" onclick="goTo('https://pinterest.com/pin/create/button/?url=&media=&description=' + window.location.href);"></menuitem>
</menu>
<menuitem label="Copy HTML5 Code" onclick="prompt('Click Ctrl + C then Enter to copy HTML code.', HTML);"></menuitem>
<menuitem label="Copy CSS Code" onclick="prompt('Click Ctrl + C then Enter to copy CSS code.', CSS);"></menuitem>
<menuitem label="Copy JS Code" onclick="prompt('Click Ctrl + C then Enter to copy JS code.', JS);"></menuitem>
</menu>
</section>
</body>
</html>
答案 0 :(得分：1)
我重新插入您的代码，每</script>更改为</scr'+'ipt>。您的代码有一些错误，即使修复后，弹出窗口和iframe也被阻止执行：
错误1 - 将document.getElementById("iframecontainer").innerHTML = " ">更改为document.getElementById("iframecontainer").innerHTML = " ";
错误2 - 将<div name = "iframecontainer"></div>更改为<div id = "iframecontainer"></div>
调用window.open时出错 - ＆＃34;阻止打开＆＃39; about：blank＆＃39;在一个新窗口中，因为请求是在沙盒框架中进行的，其中允许弹出窗口＆＃39;未设置权限。＆＃34;
插入iframe时出错 - ＆＃34;未捕获的SecurityError：沙箱访问冲突：在＆＃34; http://stacksnippets.net＆＃34;阻止了一个框架从访问＆＃34; null＆＃34;的框架。两个框架都是沙盒，并且没有“允许 - 同源”＃34; 。标志＆＃34;
$(document).ready(function(){
var HTMLeditor = document.getElementById("HTMLeditor");
var CSSeditor = document.getElementById("CSSeditor");
var JSeditor = document.getElementById("JSeditor");
var result = document.getElementById("see-result");
var code = document.getElementById("code");
var jqueryMode = document.getElementById("jqueryMode");
var bootstrapMode = document.getElementById("bootstrapMode");
var gigaboyMode = document.getElementById("gigaboyMode");
var sizzle = document.getElementById("sizzle");
var scrnSz = document.getElementById("screenSize");
var editorStyle = document.getElementById("editorStyle");
var codes = ["JavaScript", "CSS", "Gigaboy.js", "JQuery", "Bootstrap", "HTML5", "Sizzle.js"];
var selCode = Math.floor(Math.random() * 7);
code.innerHTML = codes[selCode]
$("textarea").keydown(function(e) {
if (e.keyCode == 9) {
e.preventDefault();
var start = $(this).get(0).selectionStart;
var end = $(this).get(0).selectionEnd;
// set textarea value to: text before caret + tab + text after caret
$(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring(end));
// put caret at right position again
$(this).get(0).selectionStart =
$(this).get(0).selectionEnd = start + 1;
}
});
HTMLeditor.value = '<!DOCTYPE HTML>\n<HTML lang="en">\n\t<head>\n\t\t<meta charset="UTF-8">\n\t\t<title title="">\n\t\t\t\n\t\t</title>\n\t</head>\n\t<body>\n\t\t\n\t</body>\n</HTML>';
CSSeditor.value = 'body {\n\tbackground-color: white;\n\tmargin: auto;\n\tfont-size: 12pt;\n\tfont-family: Courier New;\n\twidth: auto;\n\theight: auto;\n}';
JSeditor.placeholder = 'Please do NOT include this.\t\t\n\nwindow.onload = function() {\n //Code\n};\t\t\n\nIt causes glitches.';
function getCode() {
HTML = HTMLeditor.value.replace(/\t+/g, "");
CSS = CSSeditor.value.replace(/\t+/g, "");
JS = JSeditor.value.replace(/\t+/g, "");
} setInterval(getCode, 750);
jqueryMode.onclick = function() {
if (jqueryMode.value == "ON") {
JSeditor.placeholder = 'Pleas do NOT include this.\t\t\n\n$("document").ready(function(){\n\ //Code\n});\t\t\n\nIt causes glitches.';
} else if (jqueryMode.value == "OFF") {
JSeditor.placeholder = 'Please do NOT include this.\t\t\n\nwindow.onload = function() {\n //Code\n};\t\t\n\nIt causes glitches.';
}
};
editorStyle.onclick = function() {
if (editorStyle.value == "default") {
HTMLeditor.style.backgroundColor = "#DEDEDE";
HTMLeditor.style.backgroundImage = "none";
HTMLeditor.style.color = "#0000DD";
CSSeditor.style.backgroundColor = "#DEDEDE";
CSSeditor.style.backgroundImage = "none";
CSSeditor.style.color = "#DD0000";
JSeditor.style.backgroundColor = "#DEDEDE";
JSeditor.style.backgroundImage = "none";
JSeditor.style.color = "#007700";
} else if (editorStyle.value == "dark") {
HTMLeditor.style.backgroundColor = "#000040";
HTMLeditor.style.backgroundImage = "none";
HTMLeditor.style.color = "#EEEE00";
CSSeditor.style.backgroundColor = "#000040";
CSSeditor.style.backgroundImage = "none";
CSSeditor.style.color = "#EE0000";
JSeditor.style.backgroundColor = "#000040";
JSeditor.style.backgroundImage = "none";
JSeditor.style.color = "#00EE00";
} else if (editorStyle.value == "classic") {
HTMLeditor.style.backgroundColor = "white";
HTMLeditor.style.backgroundImage = "none";
HTMLeditor.style.color = "#000000";
CSSeditor.style.backgroundColor = "white";
CSSeditor.style.backgroundImage = "none";
CSSeditor.style.color = "#000000";
JSeditor.style.backgroundColor = "white";
JSeditor.style.backgroundImage = "none";
JSeditor.style.color = "#000000";
} else if (editorStyle.value == "fireNight") {
HTMLeditor.style.backgroundImage = "url('http://www.creativepadphotography.com/wp-content/uploads/2015/04/star_new_low.jpg')";
HTMLeditor.style.color = "#FF9A00";
CSSeditor.style.backgroundImage = "url('http://www.creativepadphotography.com/wp-content/uploads/2015/04/star_new_low.jpg')";
CSSeditor.style.color = "#FF9A00";
JSeditor.style.backgroundImage = "url('http://www.creativepadphotography.com/wp-content/uploads/2015/04/star_new_low.jpg')";
JSeditor.style.color = "#FF9A00";
}
};
result.onclick = function() {
if (HTMLeditor.value == "" && CSSeditor.value == "" && JSeditor.value == "") {
alert("It kind of makes sense to type some code first.");
} else {
if (scrnSz.value == "iframe") {
var ifr = document.createElement("iframe");
ifr.setAttribute("id", "iframeResult");
document.getElementById("iframecontainer").innerHTML = " ";
document.getElementById("iframecontainer").appendChild(ifr);
var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
ifrw.document.open();
ifrw.document.write(HTMLeditor.value + '<style>' + CSSeditor.value + '</style>' + '<script>' + JSeditor.value + '</scr'+'ipt>');
ifrw.document.close();
if (ifrw.document.body && !ifrw.document.body.isContentEditable) {
ifrw.document.body.contentEditable = true;
ifrw.document.body.contentEditable = false;
}
} else {
if (scrnSz.value == "MED") {
newWindow = window.open("about:blank", "window1", "width=950, height=750");
newWindow.moveTo(150, 150);
} else if (scrnSz.value == "FULL") {
newWindow = window.open("about:blank", "window1", "width=" + screen.width + ", height=" + screen.height);
newWindow.moveTo(150, 150);
} else if (scrnSz.value == "SMALL") {
newWindow = window.open("about:blank", "window1", "width=750, height=550");
newWindow.moveTo(255, 255);
}
if (jqueryMode.value == "twoTwoOne") {
newWindow.document.write('<script src="http://code.jquery.com/jquery-2.2.1.js"></scr'+'ipt>');
} else if (jqueryMode.value == "oneTwelveOne") {
newWindow.document.write('<script src="http://code.jquery.com/jquery-1.12.1.js"></scr'+'ipt>')
}
if (bootstrapMode.value == "ON") {
newWindow.document.write('<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">');
}
if (gigaboyMode.value == "ON") {
newWindow.document.write('<script src="http://www.gigaboywebdesigns.com/Gigaboy.js"></scr'+'ipt>');
}
if (sizzle.value == "ON") {
newWindow.document.write('https://github.com/jquery/sizzle/blob/master/src/sizzle.js');
}
newWindow.document.write(HTMLeditor.value);
newWindow.document.write('<script>' + JSeditor.value + '</scr'+'ipt>');
newWindow.document.write('<style>' + CSSeditor.value + '</style>');
}
}
};
ctrlS(result);
});@font-face {
font-family: Bandits;
src: url("Bandits.ttf");
font-weight: bold;
}
#iframeResult {
position: absolute;
left: 10%;
width: 1005px;
height: 800px;
margin-bottom: 15px;
}
textarea {
position: absolute;
left: 10%;
width: 1000px;
height: 625px;
resize: none;
border: 2px solid #999;
background-attachment: fixed;
background-size: cover;
background-color: #DEDEDE;
tab-size: 3;
-moz-tab-size: 3;
-o-tab-size: 3;
-webkit-tab-size: 3;
} textarea:focus {
outline: 2px solid #999;
}
#HTMLeditor {
top: 173px;
color: #00D;
}
#CSSeditor {
top: 833px;
color: #D00;
}
#JSeditor {
top: 1493px;
color: #070;
}
#see-result {
color: black;
position: absolute;
top: 158px;
right: 12%;
width: 125px;
letter-spacing: 2.7px;
font-weight: bold;
background-color: #999;
text-align: center;
padding-top: 6.5px;
padding-bottom: 6.5px;
cursor: pointer;
font-family: Times;
} #see-result:hover {
background-color: #BCBCBC;
}
header {
text-align: center;
font-size: 75px;
font-family: Bandits;
letter-spacing: 4px;
}
body {
background-image: url("bgimage.png");
background-attachment: fixed;
color: limegreen;
}
#jqueryMode {
position: absolute;
left: 10.3%;
top: 145px;
}
#bootstrapMode {
position: absolute;
left: 19.95%;
top: 145px;
}
#gigaboyMode {
position: absolute;
left: 30.75%;
top: 145px;
}
#sizzle {
position: absolute;
left: 42.075%;
top: 145px;
}
#screenSize {
position: absolute;
left: 52.4%;
top: 145px;
}
#editorStyle {
position: absolute;
left: 62.3%;
top: 145px;
}
a {
text-decoration: none;
color: red;
}
#rightMenu {
background-color: #EFEFEF;
border-radius: 3px;
color: black;
width: 110px;
display: none;
position: absolute;
}
#share {
padding: 5.5px;
}
#fb, #tweet {
position: relative;
top: -7px;
left: 40px;
margin: 2px;
display: none;
}
hr {
border-color: lightgrey;
width: 105px;
display: none;
}<!DOCTYPE HTML>
<HTML lang = "en-US">
<head>
<meta charset = "UTF-8">
<meta name = "author" content = "Adam S. Oates">
<meta name = "description" content = "This HTML file was created to test new thigns I learn">
<meta name = "title" content = "Online Code Editor">
<title title = "Online Code Editor">
Online Code Editor
</title>
<link rel = "apple-touch-icon" href = "">
<link rel = "shortcut icon" href = "">
<link rel = "stylesheet" type = "text/css" href = "main.css">
<script type = "text/javascript" src = "http://code.jquery.com/jquery-2.2.1.js"></script>
<script type = "text/javascript" src = "http://www.gigaboywebdesigns.com/Gigaboy.js"></script>
<script type = "text/javascript" src = "main.js"></script>
<noscript>
<h2>JavaScript is required. Look in your browser settings to enable JavaScript.</h2>
</noscript>
</head>
<body>
<section contextmenu="mymenu">
<script type = "text/javascript">
function goTo(url) { window.open(url, "shareWindow"); }
</script>
<header>
Gigaboy <span id = "code"></span> Editor
</header>
<textarea spellcheck = "false" autocomplete = "off" placeholder = "Type HTML Here" id = "HTMLeditor"></textarea>
<a id="CSS"></a>
<textarea spellcheck = "false" autocomplete = "off" placeholder = "Type CSS Here" id = "CSSeditor"></textarea>
<a id="JavaScript"></a>
<textarea spellcheck = "false" autocomplete = "off" placeholder = "Type JavaScript Here" id = "JSeditor"></textarea>
<span id = "see-result">View Result</span>
<div id = "iframecontainer"></div>
<select id = "jqueryMode">
<option value = "OFF">Disable JQuery</option>
<option value = "oneTwelveOne">Jquery 1.12.1</option>
<option value = "twoTwoOne">JQuery 2.2.1</option>
</select>
<select id = "bootstrapMode">
<option value = "OFF">Disable Bootstrap</option>
<option value = "ON">Enable Bootstrap</option>
</select>
<select id = "gigaboyMode">
<option value = "OFF">Disable Gigaboy.js</option>
<option value = "ON">Enable Gigaboy.js</option>
</select>
<select id = "sizzle">
<option value = "OFF">Disable Sizzle.js</option>
<option value = "ON">Enable Sizzle.js</option>
</select>
<select id = "screenSize">
<option value = "SMALL">Small Screen</option>
<option value = "MED">Medium Screen</option>
<option value = "FULL">Full Screen</option>
<option value = "iframe">In Frame</option>
</select>
<select id = "editorStyle">
<option value = "default">Default</option>
<option value = "dark">Dark</option>
<option value = "classic">Classic</option>
<option value = "fireNight">Fire in the Night</option>
</select>
<menu type="context" id="mymenu">
<menu label="Share...">
<menuitem label="Facebook" icon="http://images.roadscholar.org/header/facebook_icon.jpg" onclick="goTo('https://www.facebook.com/sharer/sharer.php?u=http%3A' + window.location.href);"></menuitem>
<menuitem label="Tweet" icon="http://www.wolffgames.com/images/twitter_icon.png" onclick="goTo('http://twitter.com/intent/tweet?text=' + document.title + ': ' + window.location.href);"></menuitem>
<menuitem label="Google+" icon="http://blogs.findlaw.com/blotter/images/google-plus.png" onclick="goTo('https://plus.google.com/share?url=' + window.location.href);"></menuitem>
<menuitem label="Pinterest" icon="data:image/jpeg;base64,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" onclick="goTo('https://pinterest.com/pin/create/button/?url=&media=&description=' + window.location.href);"></menuitem>
</menu>
<menuitem label="Copy HTML5 Code" onclick="prompt('Click Ctrl + C then Enter to copy HTML code.', HTML);"></menuitem>
<menuitem label="Copy CSS Code" onclick="prompt('Click Ctrl + C then Enter to copy CSS code.', CSS);"></menuitem>
<menuitem label="Copy JS Code" onclick="prompt('Click Ctrl + C then Enter to copy JS code.', JS);"></menuitem>
</menu>
</section>
</body>
</html>