window.alert = function (obj) {
	var iframe = document.createElement('iframe');
	iframe.src = 'javascript:void(0);'
	document.body.appendChild(iframe)
	iframe.contentWindow.alert(obj);
	iframe.parentNode.removeChild(iframe);
}

window.hugo={}
window.hugo.iframes=[]
let iframes=window.hugo.iframes;
var openIframe=function(html,body){
	// 1. 创建<iframe>元素
	var ifr = document.createElement('iframe');
//	// 2. 将CSS，HTML字符串转换为Blob对象
//	var blob = new Blob([html], {
//	  'type': 'text/html'
//	});
//	// 3. 使用URL.createObjectURL()方法将...
//	iframe.src = URL.createObjectURL(blob);
	body.innerHTML = "";
	body.appendChild(ifr);
	var ifrw = (ifr.contentWindow) ? ifr.contentWindow: (ifr.contentDocument.document) ? ifr.contentDocument.document: ifr.contentDocument;
	ifrw.document.open();
	ifrw.document.write(html);
	ifrw.document.close();
	//console.log(x)
}
//开启页面html
{

    let xx = $("#cnblogs_post_body,.cnblogs-post-body").find("[data-type=html]");
    let xxx = [];
    for (let x of xx) {
        xxx.push(x.innerText)
    };
    xx.remove();
    let URL = window.URL || window.webkitURL;
    for (let x of xxx) {
		//openIframe(x,document.body)
		iframes.push(x);
    };
}

web在线调试

xx
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

   	<title>HTML/CSS/JS 在线工具</title>
<meta name="keywords" content="HTML/CSS/JS 在线工具">
<meta name="description" content="通过 HTML/CSS/JS 在线工具，你可以在线输入 HTML 、CSS、JS 代码，该工具能实时显示运行效果。..">
   
			<script src="https://cdn.staticfile.org/codemirror/5.25.0/codemirror.min.js"></script>
		<link rel="stylesheet" href="https://cdn.staticfile.org/codemirror/5.25.0/codemirror.min.css">
				<script src="https://cdn.staticfile.org/codemirror/5.25.0/mode/htmlmixed/htmlmixed.js"></script>
				<script src="https://cdn.staticfile.org/codemirror/5.25.0/mode/css/css.js"></script>
				<script src="https://cdn.staticfile.org/codemirror/5.25.0/mode/javascript/javascript.js"></script>
				<script src="https://cdn.staticfile.org/codemirror/5.25.0/mode/xml/xml.js"></script>
			<link href="https://cdn.staticfile.org/normalize/7.0.0/normalize.min.css" rel="stylesheet">
    <!-- Bootstrap Core CSS -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!--[if lt IE 9]>
        <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
        <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

	
<!-- jQuery -->
<script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>
</head>

<body>


<div class="container"><link rel="stylesheet" href="https://static.runoob.com/assets/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="https://static.runoob.com/assets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="https://static.runoob.com/assets/jqwidgets/jqxsplitter.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.25.0/addon/edit/closetag.min.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.25.0/addon/edit/closebrackets.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.25.0/addon/display/placeholder.js"></script>

<style type="text/css">

.container{ 
	width: 100%;
}

.CodeMirror {
	border: 0px solid #fff; 
	height: auto;
	font-size: 14px;
	line-height: 18px;
}
/*
.CodeMirror pre {
	word-wrap: break-word;
	white-space: pre-wrap;
	word-break: keep-all;
}*/
table td {
	word-wrap: break-word;
	word-break: break-all;
}
.modal-dialog  {
	width: 800px;
}
#output {
	width: 100%;
	height: 100%;
}
#iframeResult {
	display:block;
	overflow:hidden;
	border:0!important;
	min-width:100px;
	width:100%;
	height:100%;
	background-color:#fff
}
body{
	background-color: transparent;
}
</style>
	

<div class="row" style="padding-top:30px;" id="runoob-content">
	<div class="col-md-12">
		<div class="panel panel-default">
							<div class="panel-heading">
			<form class="form-inline"role="form">

				 				 			  	 <!-- <button type="button" class="btn btn-warning" id="librep">选择库</button>-->
			  	 <button type="button" class="btn btn-warning" id="basehtml">HTML 模板</button>
				 <div class="form-group">
				 <select class="form-control" id="sel1">
			     <option value="nourl" selected="selected">选择库...</option>
			     <option value="jq">使用 jQuery 2.2.4</option>
			     <option value="bs">使用 Bootstrap 3.3.7</option>
			     <option value="ag">使用 Angular 1.6.6</option>
			     <option value="vue">使用 Vue 2.2.2</option>
			     <option value="fa">使用 Font Awesome 4.7.0</option>
			     <option value="more">更多……</option>
			  	 </select>
				 <button type="button" class="btn btn-success" id="runcode">运行</button>
				 <label>
				<input type="checkbox" id="isautorun">自动执行
				</label>
			  	 </div>
			  	
						<div class="form-group alert alert-danger" style="display:none;padding: 6px;"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> <span> 错误！请进行一些更改。</span></div>

			</form>
    
			 </div>
			 <div class="panel-body"> 
			 <form role="form" id="compiler-form">
			 <div id="splitContainer">
				<div>
					<div id="leftSplitter">
						<div>
							<textarea placeholder="输入 HTML 代码……" id="code-html" class="form-control" name="code" rows="11"></textarea>
							<a href="javascript:void(0);" class="windowLabel" data-panel="js">
								<span class="label">
									HTML
								</span>
								<i class="fa fa-cog">
								</i>
							</a>
						</div>
						<div>
							<textarea placeholder="输入 JavaScript 代码……" id="code-js" class="form-control" name="code" rows="10"></textarea>
							<a href="javascript:void(0);" class="windowLabel" data-panel="js">
								<span class="label">
									JavaScript
								</span>
								<i class="fa fa-cog">
								</i>
							</a>
						</div>
					</div>
				</div>
				<div>
					<div id="rightSplitter">
						<div>
							<textarea placeholder="输入 CSS 代码……" id="code-css" class="form-control" rows="11"></textarea>
							<a href="javascript:void(0);" class="windowLabel" data-panel="js">
								<span class="label">
									CSS
								</span>
								<i class="fa fa-cog">
								</i>
							</a>
						</div>
						<div id="output">
						</div>
					</div>
				</div>
			</div>
        	</form>
			</div>
		</div>
	</div>
</div> 
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
              生成链接
            </h4>
         </div>
         <div class="modal-body">
           <div class="input-group">
	         <span class="input-group-addon">标题</span>
	         <input type="text" id="post_title" class="form-control" placeholder="请输入标题……">
      		</div><br>
      		<div class="alert alert-warning">提示！对于发布的内容我们会定期审核，对于违规或错误代码会进行删除处理。</div>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">关闭
            </button>
            <button type="button" class="btn btn-success" id="save">
               保存代码
            </button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>


<!-- 模态框（Modal）扩展库 -->
<div class="modal fade" id="libs" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
              扩展库
            </h4>
         </div>
         <div class="modal-body">
          <form role="form">
			  	<div class="input-group">
					<span class="input-group-addon">输入库名：</span>
					<input type="text" class="form-control" id="filter" placeholder="搜索扩展库……">
				</div>
				<i id="fa-spinner" class="fa fa-spinner fa-pulse fa-3x fa-fw" style="display: none;padding: 10px;"></i>
				<table id="libs-table" class="table table-striped"></table>

			</form>
         </div>
         
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

<script type="text/javascript">
$(document).ready(function () {
	var winHeight=0;
    if (window.innerHeight) {
        winHeight = window.innerHeight;
    } else if ((document.body) && (document.body.clientHeight)) {
        winHeight = document.body.clientHeight;
    }
    //通过深入Document内部对body进行检测，获取浏览器窗口高度
    if (document.documentElement && document.documentElement.clientHeight) {
        winHeight = document.documentElement.clientHeight;
    }
	$(".close").click(function(){
		if(parent){
			var iframe= parent.window.document.getElementsByTagName("iframe")[0];
			if(iframe){
				if(iframe.parentNode){
					iframe.parentNode.removeChild(iframe)
				}			
			}
		}
	});
	$("#runcode").click(function() {
		submitTryit();
	}) ;
	$("#isautorun").prop( "checked", true );
    height = (winHeight - 60) * 0.86;
    $('#splitContainer').jqxSplitter({ height: height, width: '100%', orientation: 'vertical', panels: [{ size: '50%' }, { size: '50%' }] });
    $('#leftSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal',  panels: [{ size: '50%' }, { size: '50%'}] });
    $('#rightSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal',  panels: [{ size: '50%' }, { size: '50%'}] });
});
	// CM OPTIONS
	var cm_opt = {
		mode: 'text/html',
		gutter: true,
		lineNumbers: true,
		autoCloseBrackets:true,
		lineWrapping: true,
		matchBrackets: true,
		autoCloseTags:true
	};
	// HTML EDITOR
	var html_box = document.querySelector('#code-html');
	var html_editor = CodeMirror.fromTextArea(html_box, cm_opt);
	//var isautorun = $('#isautorun').prop('checked');
		html_editor.on('change',function (inst, changes) {
		if($('#isautorun').prop('checked')) {
			submitTryit();
		}
  		
  	});
  	// CSS EDITOR
	cm_opt.mode = 'css';
	var css_box = document.querySelector('#code-css');
	var css_editor = CodeMirror.fromTextArea(css_box, cm_opt);
	
	
  	css_editor.on('change', function (inst, changes) {
		if($('#isautorun').prop('checked')) {
  			submitTryit();
		}
  	});
	
	// JAVASCRIPT EDITOR
	cm_opt.mode = 'javascript';
	var js_box = document.querySelector('#code-js');
	var js_editor = CodeMirror.fromTextArea(js_box, cm_opt);
	
  		
  	js_editor.on('change', function (inst, changes) {
		if($('#isautorun').prop('checked')) {
  			submitTryit();
		}
  	});
  	
  	$("#basehtml").click(function() {
		_html_code = ``;
		html_editor.getDoc().setValue(_html_code);
	});


	$("#librep").click(function(){ $("#libs").modal("show"); });
	$( "select" ).change(function() {
		$( "select option:selected" ).each(function() {
			_thisvar = $(this).val();
			_inithtmlcode = html_editor.getValue();
			if(_thisvar=='more'){
				$("#libs").modal("show");
			} else if(_thisvar == 'jq') {
				_html_script_code = "<script src=\"https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js\"><\/script>\n";
				html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
			}else if(_thisvar == 'bs') {
				_html_script_code = "<link rel=\"stylesheet\" href=\"https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css\">\n<script src=\"https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js\"><\/script>\n<script src=\"https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js\"><\/script>\n";
				html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
			}else if(_thisvar == 'ag') {
				_html_script_code = "<script src=\"https://cdn.staticfile.org/angular.js/1.6.6/angular.min.js\"><\/script>\n";
				html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
			}else if(_thisvar == 'vue') {
				_html_script_code = "<script src=\"https://cdn.staticfile.org/vue/2.2.2/vue.min.js\"><\/script>\n";
				html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
			}else if(_thisvar == 'fa') {
				_html_script_code = "<link rel=\"stylesheet\" href=\"https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css\">\n";
				html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
			}
	    });
	});

	$('#libs').on('hidden.bs.modal', function () {
		$("#sel1 option:first-child").attr('selected', true);
		$("#sel1 option:last-child").attr('selected', false);
		$("#libs-table tr").removeClass("success");
	})
	

	$("#filter").keyup(function() {
		_search_value = $(this).val();
		
		$.get('https://api.cdnjs.com/libraries',{search:_search_value},function(data) {
			var _val_tr ='';
			$("#fa-spinner").show();
			$.each(data.results, function(i, item) {
				if(i < 10) {
					_val_tr += '<tr><td>'+item.name+' </td><td>'+item.latest+'</td><td>&nbsp;&nbsp;<i class="fa fa-paper-plane-o" aria-hidden="true"></i>&nbsp;&nbsp;</td></tr>';
				} else {
					return false;
				};
			});
			if(_val_tr) {
				$("#libs-table").html('<tr><th>库名</th><th>地址</th><th>插入</th></tr>' + _val_tr);
			}
			$("#fa-spinner").hide();
		});
	});
	$( document ).ajaxComplete(function() {
		$("tr").not(':first').hover(
			function () {
				if(!$(this).hasClass("success")) {
					$(this).addClass("warning");
				}
			},
			function () {
				$(this).removeClass("warning");
			}
		);
		$("tr").not(':first').click(function() {
			if(!$(this).hasClass("success")) {
				_editor_content = html_editor.getValue();
				$(this).addClass("success")
				$(this).removeClass("warning");
				_libsrc = $(this).find("td").eq(1).text();
				if(_editor_content.indexOf(_libsrc) !== -1 ) {
					return;
				}
				if( _libsrc.indexOf('.js')!==-1 ){
					_libsrc = '<script src="'+_libsrc+'"><\/script>\n';
				} else if(_libsrc.indexOf('.css')!==-1) {
					_libsrc = '<link rel="stylesheet" href="'+_libsrc+'">\n';
				} 
				
				patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
				array_matches_body = patternBody.exec(_editor_content);
				patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im;
				array_matches_head = patternHead.exec(_editor_content); 
				
				if(array_matches_head) {
					_editor_content = _editor_content.replace('</head>', _libsrc + '</head>');
					
				} else if(array_matches_body) {
					_editor_content = _editor_content.replace('</body>', _libsrc + '</body>');
				} else {
					_editor_content = _libsrc + _editor_content;
				}
				html_editor.getDoc().setValue(_editor_content);
			} 
		});
	});

	$("#save").click(function() {
		post_title = $("#post_title").val().trim();
		var isnum = /^\d+$/.test(post_title);
		var isletter = /^[a-zA-Z]+$/.test(post_title);
		if( isnum ) {
			alert("请认真填写标题！");
		} else if( isletter ) {
			alert("加点中文描述，大家更容易理解！");
		}else if(post_title=="" || post_title.length<6) {
			alert("标题不能为空且不能少于6个字符……");
		} else {
			var htmlSource = html_editor.getValue(),
			cssSource = css_editor.getValue(),
			jsSource = js_editor.getValue(),
			post_content = '';
			if(htmlSource!='' || jsSource!='' || cssSource!='') {
				$.post("/savecode.php", {post_title:post_title, html: htmlSource, js: jsSource, css:cssSource,filename: ""}, function(data){
					
					if(data.errno) {
						alert(data.msg)
					} else {
						$("#save").prop('disabled',false);
						alert(data.msg)
						window.location.href = data.url
					}
			     
			   }, "json");
			} else {
				alert("请输入你要展示的代码……");
			}
		}
			
	});
	html_editor.setSize('100%','100%');
    js_editor.setSize('100%', '100%');
    css_editor.setSize('100%','100%');
   



function submitTryit() {
	// 基础模板
	
	var html = html_editor.getValue(),
	css = css_editor.getValue(),
	js = js_editor.getValue(),
	src = html;
	if (html) {
		var patternHtmlTag = /<html([^>]*)>/im;
		var array_matches_html_tag = patternHtmlTag.exec(src);
		if (array_matches_html_tag) {
			src = src.replace('<html>', '<html ' + array_matches_html_tag[1] + '>');
		}
		var patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im
		var array_matches_head = patternHead.exec(src);

		var patternBodyTag = /<body([^>]*)>/im;
		var array_matches_body_tag = patternBodyTag.exec(src);
		if (array_matches_body_tag) {
			src = src.replace('<body>', '<body ' + array_matches_body_tag[1] + '>');
		} 
		
	} 
	//console.log(css);
	if (css.indexOf('<style>') !== -1) {
		$(".alert-danger span").text('CSS 编辑框不需要 <style> 标签');
		$(".alert-danger").show().delay(5000).fadeOut();
		return;
	} else if (js.indexOf('<script>') !== -1) {
		$(".alert-danger span").text('JavaScript 编辑框不需要 <script> 标签');
		$(".alert-danger").show().delay(5000).fadeOut();
		return;
	} else {
		$(".alert-danger").hide();
	}

	// CSS
    if(css) {
		css = '<style>' + css + '</style>';
		if (array_matches_head) {
			src = src.replace('</head>', css + '</head>');
		} else if (array_matches_body_tag) {
			src = src.replace('</body>', css + '</body>');
		} else {
			src +=  css;
		}
	}

	// Javascript
	if(js) {
		js = '<script>' + js + '<\/script>';
		if (array_matches_body_tag) {
			src = src.replace('</body>', js + '</body>');
		}else {
			src +=  js;
		}
	}

	text = src;
	var ifr = document.createElement("iframe");
	ifr.setAttribute("frameborder", "0");
	ifr.setAttribute("id", "iframeResult");
	document.getElementById("output").innerHTML = "";
	document.getElementById("output").appendChild(ifr);

	var ifrw = (ifr.contentWindow) ? ifr.contentWindow: (ifr.contentDocument.document) ? ifr.contentDocument.document: ifr.contentDocument;
	ifrw.document.open();
	ifrw.document.write(text);
	ifrw.document.close();
	autodivheight();
}
submitTryit();
window.addEventListener("resize", autodivheight);
function autodivheight(){
    var winHeight=0;
    if (window.innerHeight) {
        winHeight = window.innerHeight;
    } else if ((document.body) && (document.body.clientHeight)) {
        winHeight = document.body.clientHeight;
    }
    //通过深入Document内部对body进行检测，获取浏览器窗口高度
    if (document.documentElement && document.documentElement.clientHeight) {
        winHeight = document.documentElement.clientHeight;
    }
    height = height = (winHeight - 60) * 0.86;
    document.getElementById("splitContainer").style.height= height +"px";
}
</script>


</div>

<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>


#iframe {
    width: 100%;
    height: -webkit-fill-available;
    height: -moz-fill-available;
    height: -moz-available;
    height: fill-available;
}
#iframe.fullscreen{
    position: fixed;
    border:0px solid;
    outline:9999px solid rgba(0,0,0,.6);
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
    overflow:hidden;
    z-index: 100;
    background: #000000aa;
}
iframe {
    width: 100%;
    height: -webkit-fill-available;
    height: -moz-fill-available;
    height: -moz-available;
    height: fill-available;
    border: 0;
    overflow: hidden;
    margin-top: -44px;
}

#close {
    background: #E91E63;
    color: #eee;
    text-shadow: 0 0 0;
    border-radius: 12px;
    line-height: 20px;
    text-align: center;
    height: 22px;
    width: 22px;
    padding: 1px;
    margin-top: 22px;
    margin-right: 6px;
    position: relative;
    float: right;
}

/* use cross as close button */
#close::before {
    content: "\2756";
}




$(function(){
openIframe(hugo.iframes[0],$("#iframe")[0]);
$("#iframe").prepend("<button id='close'></button>")
$("#close").click(function(){
	$("#iframe").toggleClass('fullscreen')
})
})
posted @ 2019-04-17 07:40  离线云  阅读(259)  评论(2)  编辑  收藏  举报