Javascript实现HTML代码预览功能,显示运行效果

发布于 2015-08-08 22:10 分类：web前端来源：本站阅读(0) 评论(0)

JavaScript实现HTML代码预览功能，显示代码运行效果，将HTML代码复制到代码输入框内或直接在代码输入框内进行编写代码，点击运行代码按钮后，可立即查看代码运行效果，方便web设计开发。

源代码

<!DOCTYPE html>
<html>
<head>
<title>HTML代码预览</title>
<style type="text/css">
body{margin-top: 0px;font-size: 9pt;margin-LEFT: 4px;margin-right: 0px;font-family: "微软雅黑"}
a{font-weight: 400;font-size: 13px;color: black;text-decoration: none}
a: hover{font-weight: 400;font-size: 13px;color: red;text-decoration: underline}
a: active{cursor: hand;color: #ff0033}
.style1{font-size: 30px;}
.style2{font-weight: bold;font-size: 20px;}
#input_btn input{
border:1px solid #8599b1;font-size:9pt;margin-right:6px;padding:3px;cursor:pointer;
}
</style>
<meta http-equiv=Content-Type content="text/html; charset=gbk">
</head>
<body>
<center>
  <span><font face="Arial">HTML代码预览</font></span>
</center><br>
<center>
    <p><span><font >请在下面窗口中输入html代码</font></span></p>
<script language=Javascript>
var Array();var userAgent=navigator.userAgent.toLowerCase();var is_opera=userAgent.indexOf('opera')!=-1&&opera.version();var is_moz=(navigator.product=='Gecko')&&userAgent.substr(userAgent.indexOf('firefox')+ 8,3);var is_ie=(userAgent.indexOf('msie')!=-1&&!is_opera)&&userAgent.substr(userAgent.indexOf('msie')+ 5,3);Array.prototype.push=function(value){this[this.length]=value;return this.length;}
function $(objname){return document.getElementById(objname);}
function runCode(objname){var winname=window.open('',"_blank",'');var obj=$(objname);winname.document.open('text/html','replace');winname.opener=null
winname.document.write(obj.value);winname.document.close();}

function trestart(){
   if (script) {
   clear = confirm("确定要清除吗？",'');
   if(clear) {
   document.script.reset();
   document.script.value = "";
  }
 }
}    
function test(){
  {
  temp = document.script.content.value;
  testwin= open("", "testwin","status=no,menubar=yes,toolbar=no");
  testwin.document.open();
  testwin.document.write(temp);
  testwin.document.close();
 }
}
function about(){
 alert("html代码预览程序\n可以将web代码运行显示出效果页面")
}
function help(){ 
 OpenWindow=window.open("", "newwin","height=220,width=470,toolbar=no,scrollbars="+scroll+",menubar=no");
 OpenWindow.document.write("<body bgcolor='white' text='black' alink='blue'vlink='blue' link='blue'><title>帮助信息</title>")
 OpenWindow.document.write("<center>把html代码放到代码输入框</center><br/>点击【运行代码1】按钮，将打开新的窗口页面进行效果演示<br/>点击【运行代码2】按钮，将打开新的标签页(与浏览器默认打开页面有关)演示效果。<br/>点击【全选代码】按钮，可以快速将输入框内容全部选中。<br/>点击【清除】按钮，将清空输入框内容。<br/>")
 OpenWindow.document.write("<center><a href='mailto:postmaster@weisico.com' target='main'>写信给postmaster@weisico.com</a></center><br>")
 OpenWindow.document.write("<center><a href='javascript:close()'>关闭本窗口</a></center>")
 OpenWindow.document.close()
 self.name="main"
}
</script>
<form name="script"><textarea name="content" id="content" rows="12" wrap=off cols="60" style="background-color:#e1eeff; border: 1px solid #b5c3d3;font-size: 12pt;margin-bottom:6px;padding:10px;"></textarea> <br/>
<div id="input_btn">
<input onclick="test()" type="button" value="运行代码1">
<input type="button" name="Submit" value="运行代码2" onclick="runCode('content')"/>
<input type="button" name="Submit3" value="全选代码" onclick="$('content').select();"/> 
<input onclick="trestart()" type="button" value="清除">
<input onclick="about()" type="button" value="关于">
<input onclick="help()" type="button" value="帮助"> 
<div>
</form>
<center>
<div>
<center>
<table id="autoNumber1" style="border-collapse: collapse" bordercolor=#111111 
cellSpacing=0 cellPadding=0 width=360 border=0>
  <Tbody>
  <tr>
    <td>
      <P><span style="font-size: 9pt">HTML代码在线运行效果演示Demo代码<br><font 
      color=#ff0033><br/>&lt;!DOCTYPE html&gt;<br/>&lt;html&gt;<br/>&lt;head&gt;<br/>&lt;title&gt;HTML代码在线运行效果演示&lt;/title&gt;<br/>&lt;/head&gt;<br/>&lt;body&gt;<br/>
            欢迎访问&lt;a href="http://www.weisico.com" target="_blank"&gt;weisico.com！&lt;/a&gt;<br/>
      &lt;/body&gt;<br/>&lt;/html&gt;</font></span></p></td></tr></Tbody></table></center></div>
</body>
</html>

百家号互联网微风说

百家号互联网微风说

微信公众号 weisico-com

微信公众号weisico-com

转载请注明:微思考学习网-关注技术，分享知识 >> Javascript实现HTML代码预览功能,显示运行效果

标签：javascript HTML 源代码预览运行 web前端

相关阅读