用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的页面相关推荐

【Part2】用JS写一个Blog （node + vue + mongoDB）
[Part1]用JS写一个Blog (node + vue + mongoDB) 上一节前后端项目分别初始化完成,这一小节我就从后端项目开始写.实现mongoDB数据库的连接. 整理后端目录下面是通 ...
[js] 用js写一个方法检测浏览器是否支持css3的属性
[js] 用js写一个方法检测浏览器是否支持css3的属性 var div = document.createElement('div'); console.log(div.style.transit ...
[js] 写一个方法获取图片的方向
[js] 写一个方法获取图片的方向 <!DOCTYPE html> <html> <head><meta charset="utf-8"& ...
[js] 写一个获取页面中所有checkbox的方法
[js] 写一个获取页面中所有checkbox的方法 function getAllCheckbox() {return [...document.querySelectorAll('input[ty ...
[js]写一个获取非行间样式的方法
[js]写一个获取非行间样式的方法 window.getComputedStyle()?window.getComputedStyle(element).attribute:element.curre ...
[js] 写一个方法遍历指定对象的所有属性
[js] 写一个方法遍历指定对象的所有属性 Object.keys().Object.values()只能遍历对象自有的属性,for in 可以遍历原型中的属性. 个人简介我是歌谣,欢迎和大家一起交 ...
[js] 写一个方法，实时验证input输入的值是否满足金额如：3.56(最多只有两位小数且只能数字和小数点)的格式，其它特殊字符禁止输入
[js] 写一个方法,实时验证input输入的值是否满足金额如:3.56(最多只有两位小数且只能数字和小数点)的格式,其它特殊字符禁止输入 <body><input type=&qu ...
[js] 写一个 document.querySelector 的逆方法
[js] 写一个 document.querySelector 的逆方法 document.queryNode = function(node){if(node.id){return '#'+ nod ...
[js] 写一个方法实现promise失败后自动重试
[js] 写一个方法实现promise失败后自动重试 <!DOCTYPE html> <html lang="en"><head><met ...
[js] 写一个格式化时间的方法
[js] 写一个格式化时间的方法 function dateToString(date, format = 'yyyy-MM-dd') {const d = new Date(date);let re ...

用html和js写一个直接在页面运行js的页面

用html和js写一个直接在页面运行js的页面相关推荐

最新文章

热门文章