IT技术学习网
IT技术学习网
您的位置: 主页 > 编程技术 > html >

网页中在线运行html代码

2014-11-02 22:17 来源: IT技术学习网原创 阅读:

通过在页面中添加html代码运行框,可以在网页中直接运行html代码,对于访问者来说非常方便。

html代码运行框的代码添加起来比较简单,只需要一个textarea和数个按钮,以及执行对应操作的javascript。代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<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>
<textarea style="width: 450; height: 300" id="theCode" title="双击运行代码" ondblclick="runCode('theCode');">
这里放入运行的Html代码,欢迎来到www.itjsxx.com
</textarea><br />
<input onclick="runCode('theCode')" value="运行代码" type="button">
<input onclick="doCopy('theCode')" value="复制代码" type="button">
<input onclick="doSave('theCode','test')" value="保存代码" type="button">
</body>
</html>

一般,我们通过在线网页编辑器的源码方式直接输入textarea和内容,js通过在html文件中加载即可。

此实例的复制和保存js代码并不通用,仅供参考,请知悉。运行html代码功能测试无误,请放心使用。

网页中在线运行html代码
转载需注明出处:IT技术学习网 http://www.itjsxx.com/html/exex_html_code.html

评论文章 网页中在线运行html代码
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
IT技术学习网 - 关于我们 - 联系我们 - 版权声明 - 网站地图