在做一些网页代码演示的时候,如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上去运行看看