为什么我的iframe代码无效?

时间:2016-03-04 03:26:52

标签: javascript html css iframe

我正在尝试制作在线代码编辑器。

我有<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>

1 个答案:

答案 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;

&#13;
&#13;
$(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);

});
&#13;
@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;
}
&#13;
<!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>
&#13;
&#13;
&#13;