在做一些网页代码演示的时候,如css样式的演示和js特效演示时都会用到这样的功能 ,记录下使用的方法,有了这个大家就可以在自己的博客中使用了,
演示地址:Html代码修改和运行.其中要用到一个js代码
<script type="text/javascript"> function yunxing(obj)//函数名大家可以取 { var winname = window.open('', "_blank", ''); winname.document.open('text/html', 'replace'); winname.opener = null //防止代码对原始页面进行修改 winname.document.write(obj.value); winname.document.close(); } </script>
然后在body标签中使用<textarea rows="12" cols="60" name="f1">这里是要运行的html代码</textarea>。还要加上一个按钮来执行,<input type="button" value="运行代码" onclick="yunxing(f1);"/>其中这里的方法要和js中的一致。然后就可以运行了,来看整个的完整演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <textarea rows="12" cols="60" name="f1"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>弹窗中网页标题</title> <style type="text/css"> .tt1 ul{ margin:0; padding:0;} .tt1 li{ list-style:none; height:26px; width:200px; padding-left:10px; line-height:26px; margin-bottom:2px; background-color:#CC3399; } .tt1 li:hover{ background-color:#CCCC00; color:white; cursor:pointer;} </style> </head> <body> <div class="tt1"> <ul> <li>111111</li> <li>222222</li> <li>333333</li> <li>444444</li> <li>555555</li> </ul> </div> </body> </html> </textarea>
<input type="button" value="运行代码" onclick="yunxing(f1);"/> </body> <script type="text/javascript"> function yunxing(obj) { var winname = window.open('', "_blank", ''); winname.document.open('text/html', 'replace'); winname.opener = null //防止代码对原始页面进行修改 winname.document.write(obj.value); winname.document.close(); } </script> </html>
大家也可以到http://luyugao.com/tools/run-html.htm上去运行看看