标签：
在网页中看到一些html代码却不知这样的代码运行起来是什么样子？
觉得一些模板代码不错还要手动复制，新建文件，粘贴嫌麻烦？
下面的js方法可以帮你解决这些问题。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript在线运行html代码，保存html代码到本地</title> </head> <body> <textarea id="code" style="width: 830px;height: 480px"> <!DOCTYPE html> <html> <head> <title>Document</title> <style type="text/css"> *{margin: 0;padding: 0;} div{margin: 50px auto;width: 120px;height: 120px;border: 10px solid #f08;background: #ccc;text-align: center;} span{font: 14px/100px "Consolas";color: #333;} </style> </head> <body> <div><span>run&save Code</span></div> </body> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> </html> <script> function runCode(code) { var newWindow = window.open(‘‘, ‘‘, ‘‘); newWindow.opener = null; newWindow.document.write(code); newWindow.document.close(); } function saveCode(code, filename) { filename = filename || ‘saveCode‘; if (/trident/i.test(navigator.userAgent)) { var newwin = window.open(‘‘, ‘_blank‘, ‘top=10000‘); newwin.document.open(‘text/html‘, ‘replace‘); newwin.document.write(code); newwin.document.execCommand(‘saveas‘, ‘‘, filename + ‘.html‘); newwin.close(); } else { // ... } } function blobSaveCode(code, filename) { var urlObject = window.URL || window.webkitURL || window, exportBlob = new Blob([code]), saveLink = document.createElementNS(‘http://www.w3.org/1999/xhtml‘, ‘a‘), e = document.createEvent(‘MouseEvents‘); // ... } </script> </textarea> <br> <button onclick="runCode(document.getElementById(‘code‘).value)">运行代码</button> <button onclick="saveCode(document.getElementById(‘code‘).value, ‘save‘)">保存代码</button> <button onclick="blobSaveCode(document.getElementById(‘code‘).value, ‘blobSave‘)">保存代码Blob</button> <script> // 在线运行代码 function runCode(code) { var newWindow = window.open(‘‘, ‘‘, ‘‘); newWindow.opener = null; newWindow.document.write(code); newWindow.document.close(); } /** * 在线保存代码 * @remark 使用Blob对象来生成一个下载的文件，不支持ie10以下的浏览器 * @remark 保存到本地后的代码与原始的代码基本一致 */ function blobSaveCode(code, filename) { var urlObject = window.URL || window.webkitURL || window, exportBlob = new Blob([code]), saveLink = document.createElementNS(‘http://www.w3.org/1999/xhtml‘, ‘a‘), e = document.createEvent(‘MouseEvents‘); filename = filename || ‘blobsaveCode‘; saveLink.href = urlObject.createObjectURL(exportBlob); saveLink.download = filename + ‘.html‘; e.initMouseEvent( ‘click‘, true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null ); saveLink.dispatchEvent(e); } /** * 在线保存代码 * @remark 兼容所有浏览器 * @remark 保存到本地后代码会混乱，部分js可能无法运行 */ function saveCode(code, filename) { filename = filename || ‘saveCode‘; if (/trident/i.test(navigator.userAgent)) { var newwin = window.open(‘‘, ‘_blank‘, ‘top=10000‘); newwin.document.open(‘text/html‘, ‘replace‘); newwin.document.write(code); newwin.document.execCommand(‘saveas‘, ‘‘, filename + ‘.html‘); newwin.close(); } else { var a = document.createElement(‘a‘); document.body.appendChild(a); a.href = ‘data:text/htm;charset=utf-8,‘ + code; a.download = filename + ‘.html‘; a.click(); document.body.removeChild(a); } } </script> </body> </html>
JavaScript在线运行html代码，保存html代码到本地
标签：
原文地址：http://www.cnblogs.com/happyfreelife/p/5379292.html
