在网页中运行代码
HTML5学堂：很多代码网站当中，都会提供运行代码段功能，便于查看代码效果，那么这个是如何实现的呢？一起来看一下——如何在网页中运行代码。
HTML5学堂-刘国利said：应该是在2013年的时候，在做一个项目时，自己遇到过这个问题，最初的时候觉得挺麻烦的，但是想了想，又实现出来之后，发现网页运行代码，真的挺简单的。话说，要不要也给当前的“HTML5学堂”网站弄一个运行代码的功能呢？呵呵，过一段时间，如果有闲暇时间的话，就迭代一下这个网站，增加运行代码的功能吧~
需要的知识支撑：浏览器对象模型BOM的方法以及一些文档对象模型DOM属性和方法。
讲解原理之前，先来看效果图以及实现代码
基本效果图
具体实现功能的代码
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset='utf8' />
-
<title>HTML5学堂 - 网页中的运行代码功能</title>
-
<style>
-
textarea{
-
width: 600px;
-
height: 400px;
-
font-size: 12px;
-
font-family: '微软雅黑';
-
line-height: 14px;
-
}
-
</style>
-
</head>
-
<body>
-
<textarea id="codes"><!doctype html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>HTML5学堂 - 3D立体块</title>
-
<style>
-
*{
-
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);
-
-
}
-
</style>
-
</head>
-
<body>
-
<div class='box'>
-
<div id="con" class="con">
-
<p></p>
-
<p></p>
-
<p></p>
-
<p></p>
-
<p></p>
-
<p></p>
-
</div>
-
</div>
-
</body>
-
</html></textarea>
-
<br>
-
<input id='btn' type="button" value="运行代码" />
-
</body>
-
<script type="text/javascript">
-
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();
-
}
-
</script>
-
</html>
实现的基本原理：
首先使用open() 方法，打开一个新文档，并擦除当前文档的内容。
opener 属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用。 opener 属性非常有用,创建的窗口可以引用创建它的窗口所定义的属性和函数。
之后，用win.document.write方法。在页面载入过程中用实时脚本创建页面内容,以及用延时脚本创建本窗口或新窗口的内容。打开一个新文档之后，擦除当前文档的内容。（close方法）
欢迎沟通交流~HTML5学堂
极客编程技术分享
