在网页中运行代码
HTML5学堂：很多代码网站当中，都会提供运行代码段功能，便于查看代码效果，那么这个是如何实现的呢？一起来看一下——如何在网页中运行代码。
HTML5学堂-刘国利said：应该是在2013年的时候，在做一个项目时，自己遇到过这个问题，最初的时候觉得挺麻烦的，但是想了想，又实现出来之后，发现网页运行代码，真的挺简单的。话说，要不要也给当前的“HTML5学堂”网站弄一个运行代码的功能呢？呵呵，过一段时间，如果有闲暇时间的话，就迭代一下这个网站，增加运行代码的功能吧~
需要的知识支撑：浏览器对象模型BOM的方法以及一些文档对象模型DOM属性和方法。
讲解原理之前，先来看效果图以及实现代码
基本效果图
具体实现功能的代码
HTML5学堂 - 网页中的运行代码功能textarea{
width: 600px;
height: 400px;
font-size: 12px;
font-family: '微软雅黑';
line-height: 14px;
}
HTML5学堂 - 3D立体块*{
margin: 0;padding: 0;
}
body{
-webkit-perspective:0;
}
.box{
margin: 50px auto 0;
}
.con{
margin: 0 auto;
width: 200px;
height: 200px;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 2s ease;
}
.con:hover{
-webkit-transform: rotateX(390deg) rotateY(390deg);
}
.con p{
width: 200px;
height: 200px;
position: absolute;
-webkit-backface-visibility:hidden;
}
p:nth-child(1){
background: rgba(255,0,0,0.4);
-webkit-transform: rotateX(0deg) translateZ(100px);
}
p:nth-child(2){
background: rgba(255,255,0,0.4);
-webkit-transform: rotateX(180deg) translateZ(100px);
}
p:nth-child(3){
background: rgba(255,0,255,0.4);
-webkit-transform: rotateX(90deg) translateZ(100px);
}
p:nth-child(4){
background: rgba(0,0,255,0.4);
-webkit-transform: rotateX(270deg) translateZ(100px);
}
p:nth-child(5){
background: rgba(0,255,255,0.4);
-webkit-transform: rotateY(90deg) translateZ(100px);
}
p:nth-child(6){
background: rgba(0,255,0,0.4);
-webkit-transform: rotateY(270deg) translateZ(100px);
}
var btn = document.getElementById('btn');
var thecode = document.getElementById('codes');
btn.onclick = function () {
var win = window.open('', "_blank", '');
win.document.open('text/html', 'replace');
win.opener = null;
win.document.write(thecode.value);
win.document.close();
}
实现的基本原理：
首先使用open() 方法，打开一个新文档，并擦除当前文档的内容。
opener 属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用。 opener 属性非常有用,创建的窗口可以引用创建它的窗口所定义的属性和函数。
之后，用win.document.write方法。在页面载入过程中用实时脚本创建页面内容,以及用延时脚本创建本窗口或新窗口的内容。打开一个新文档之后，擦除当前文档的内容。(close方法)
欢迎沟通交流~HTML5学堂
