用html和js写一个直接在页面运行js的页面
生活随笔
收集整理的這篇文章主要介紹了
用html和js写一个直接在页面运行js的页面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這個需求是這樣，有時候需要對一些js進行調試，但是每次都在瀏覽器按f12會有點麻煩，寫了這樣的一個界面之后，就可以直接在html界面上直接跑js了。
廢話不多說，上代碼：
<!DOCTYPE html> <html> <head><meta charset="utf-8" /><title>直接運行js</title> </head> <body style="margin:0;padding:0;width:100%;height:100%;"> <div style="line-height:50px;text-align:center;width:100%;height:50px;color:white;background-color:deepskyblue;font-weight:bold;">直接運行js</div> <div style='text-align:center;'> <p title='輸入框輸入的腳本會在下方iframe直接運行，運行時默認document.body的background-color為#d7edf8，如需修改請在運行框中加入：document.body.style.backgroundColor="你要的顏色"'>請在下方輸入js代碼</p> <textarea id='textarea' style='width:600px;height:250px;' title='輸入框輸入的腳本會在下方iframe直接運行，運行時默認document.body的background-color為#d7edf8，如需修改請在運行框中加入：document.body.style.backgroundColor="你要的顏色"'></textarea> <p><button onclick="run(1)" title='不保留之前的運行結果'>單次運行代碼(F8)</button><button onclick="run(0)" title='首次點擊會刷新，之后會保留每次運行結果' style="margin-left:100px;">疊加運行代碼(F9)</button> </p> <iframe name='i' id="i" src="" style="width:600px;height:250px;"> <html><body></body></html> </iframe> </div></body> <script type='text/javascript'> //輸入框輸入的腳本會在下方iframe直接運行，運行時默認document.body的background-color為#d7edf8，如需修改請自行寫js function id(x){return document.getElementById(x);}var iframe = id("i"); var iframe_document = (iframe.contentWindow || iframe.contentDocument).document; iframe_document.open(); iframe_document.write('<html><body style="width:100%;height:100%;margin:0;background-color:#d7edf8;"></body></html>'); iframe_document.close(); function run(refresh){var v = id('textarea').value.replace(/\n/g,'');if(v!='')if(refresh){iframe_document.open();iframe_document.write('<html><body style="width:100%;height:100%;margin:0;background-color:#d7edf8;"><script>' + id('textarea').value + '<\/script></body></html>');iframe_document.close();}else{iframe_document.write('<html><body style="width:100%;height:100%;margin:0;background-color:#d7edf8;"><script>' + id('textarea').value + '<\/script></body></html>');} }function addEvent(obj,type,callback){if(obj.addEventListener){obj.addEventListener(type,callback);}else{obj.attachEvent('on'+type,callback);} }addEvent(document,'keydown',function(e){var currKey=0,e=e||event;currKey=e.keyCode||e.which||e.charCode;if(currKey==119){ //F8run(1);}else if(currKey==120){run(0);} })</script> </html>截個圖吧：
總結
以上是生活随笔為你收集整理的用html和js写一个直接在页面运行js的页面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用python实现自动填数生成表格v2.
- 下一篇： 将oracle select * fro