自定义html代码运行框

自定义html代码运行框

 

设置Html运行框，需要准备材料如下：

1.textarea

<textarea style="width: 450; height: 300" id="theCode" title="双击运行代码" ondblclick="runCode('theCode');">

这里放入运行的Html代码。

</textarea><br />

<input onclick="runCode('theCode')" value="运行代码" type="button"> 

<input onclick="doCopy('theCode')" value="复制代码" type="button"> 

<input onclick="doSave('theCode','test')" value="保存代码" type="button"> 

 

2.三个按钮

<script type="text/javascript">

    //执行代码

    function runCode(obj) {

        var winname = window.open('', "_blank", '');

        var content = document.getElementById(obj).value;

        winname.document.open('text/html', 'replace');

        winname.opener = null

        winname.document.writeln(content);

        winname.document.close();

    }

 

    //复制代码

    function doCopy(obj){

        var codeObj = document.getElementById(obj);

        clipboardData.setData('text', codeObj.innerText);

        alert('已经复制代码');

    }

 

    // 另存为文件

    function doSave(obj, filename){   

        var win = window.open('', '_blank', 'top=10000');

        var code = document.getElementById(obj).innerText;

        win.opener = null;

        win.document.write(code);

        win.document.execCommand('saveas', true, filename);

        win.close();

    }

</script>