Javascript 为什么我的iframe标签不起作用？
我正在尝试制作一个在线代码编辑器 我有一个Javascript 为什么我的iframe标签不起作用？,javascript,html,css,iframe,Javascript,Html,Css,Iframe,我正在尝试制作一个在线代码编辑器 我有一个标签，可以在查看结果时在新窗口或iframe之间进行选择；但每当我选择iframe时，它都不起作用 我试着在stackoverflow上寻找有同样问题的人，但我什么也找不到。另外，我不知道为什么，“运行代码片段”按钮不能正确显示所有内容。请帮帮我 $(document).ready(function(){ var HTMLeditor = document.getElementById("HTMLeditor"); var CSSedi
$(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);
});
在线代码编辑器
JavaScript是必需的。查看浏览器设置以启用JavaScript。
函数goTo（url）{window.open（url，“shareWindow”）；}
Gigaboy编辑器
查看结果
禁用JQuery
Jquery 1.12.1
JQuery 2.2.1
禁用引导
启用引导
禁用Gigaboy.js
启用Gigaboy.js
禁用Sizzle.js
启用Sizzle.js
小屏幕
中屏
全屏
框架内
违约
黑暗的
经典
夜火
document.getElementById（“iframecontainer”）.innerHTML=“”>document.getElementById（“iframecontainer”）.innerHTML=“”
错误2-将
更改为
调用window.open时出错-“阻止在新窗口中打开'about:blank'，因为该请求是在未设置'allow popups'权限的沙盒框架中发出的。”
插入iframe时出错-“未捕获安全性错误：沙盒访问冲突：阻止“”处的帧访问“null”处的帧。两个帧都是沙盒，并且缺少“允许相同来源”标志
$（文档）.ready（函数（）{
var HTMLeditor=document.getElementById（“HTMLeditor”）；
var CSSeditor=document.getElementById（“CSSeditor”）；
var JSeditor=document.getElementById（“JSeditor”）；
var result=document.getElementById（“参见结果”）；
var代码=document.getElementById（“代码”）；
var jqueryMode=document.getElementById（“jqueryMode”）；
var bootstrapMode=document.getElementById（“bootstrapMode”）；
var gigaboyMode=document.getElementById（“gigaboyMode”）；
var sizzle=document.getElementById（“sizzle”）；
var scrnSz=document.getElementById（“屏幕大小”）；
var editorStyle=document.getElementById（“editorStyle”）；
var代码=[“JavaScript”、“CSS”、“Gigaboy.js”、“JQuery”、“Bootstrap”、“HTML5”、“Sizzle.js”]；
var selCode=Math.floor（Math.random（）*7）；
code.innerHTML=代码[selCode]
$（“文本区域”）.keydown（函数（e）{
如果（e.keyCode==9）{
e、 预防默认值（）；
var start=$（this）.get（0）.selectionStart；
var end=$（this）.get（0）.selectionEnd；
//将textarea值设置为：插入符号前的文本+制表符+插入符号后的文本
$（this.val）（$（this.val（）.substring（0，start）+“\t”+$（this.val（）.substring（end））；
//再次将插入符号置于正确位置
$（此）.get（0）.selectionStart=
$（this）.get（0）.selectionEnd=start+1；
}
});
HTMLeditor.value='\n\n\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\n\t\n\t\n\t\t\n'；
CSSeditor.value='body{\n\t背景颜色：白色；\n\t边缘：自动；\n\t字体大小：12pt；\n\t字体系列：Courier New；\n\twidth:auto；\n\t字体：自动；\n}'；
JSeditor.placeholder='请不要包含此项。\t\t\n\nwindow.onload=function（）{\n//Code\n}；\t\t\n\n它会导致故障。'；
函数getCode（）{
HTML=HTMLeditor.value.replace（/\t+/g，“”）；
CSS=CSSeditor.value.replace（/\t+/g，“”）；
JS=JSeditor.value.replace（/\t+/g，“”）；
}设置间隔（getCode，750）；
jqueryMode.onclick=函数（）{
if（jqueryMode.value==“ON”）{
JSeditor.placeholder='请不要包含此项。\t\t\n\n$（“文档”）.ready（function（）{\n\//Code\n}）；\t\t\n\n它会导致故障。'；
}else if（jqueryMode.value==“OFF”）{
JSeditor.placeholder='请不要包含此项。\t\t\n\nwindow.onload=function（）{\n//Code\n}；\t\t\n\n它会导致故障。'；
}
};
editorStyle.onclick=function（）{
if（editorStyle.value==“默认”）{
HTMLeditor.style.backgroundColor=“#DEDEDE”；
HTMLeditor.style.backgroundImage=“无”；
HTMLeditor.style.color=“#0000DD”；
CSSeditor.style.backgroundColor=“#DEDEDE”；
CSSeditor.style.backgroundImage=“无”；
CSSeditor.style.color=“#DD0000”；
JSeditor.style.backgroundColor=“#DEDEDE”；
JSeditor.style.backgroundImage=“无”；
JSeditor.style.color=“#007700”；
}else if（editorStyle.value==“暗”）{
HTMLeditor.style.backgroundColor=“#000040”；
HTMLeditor.style.backgroundImage=“无”；
HTMLeditor.style.color=“#EEEE00”；
CSSeditor.style.backgroundColor=“#000040”；
CSSeditor.style.backgroundImage=“无”；
CSS