在网页中运行代码

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学堂