HTML5学堂-码匠 HTML5学堂

您当前位于:原生JS实战开发 ——> 如何让网页文章中的代码可以点击运行

如何让网页文章中的代码可以点击运行

2015/07/29 09:52:03 | 作者:HTML5学堂(码匠) | 分类:原生JS实战开发 | 关键词:运行代码,网页文章,特效,实时调试

在网页中运行代码

HTML5学堂:很多代码网站当中,都会提供运行代码段功能,便于查看代码效果,那么这个是如何实现的呢?一起来看一下——如何在网页中运行代码。

HTML5学堂-刘国利said:应该是在2013年的时候,在做一个项目时,自己遇到过这个问题,最初的时候觉得挺麻烦的,但是想了想,又实现出来之后,发现网页运行代码,真的挺简单的。话说,要不要也给当前的“HTML5学堂”网站弄一个运行代码的功能呢?呵呵,过一段时间,如果有闲暇时间的话,就迭代一下这个网站,增加运行代码的功能吧~

需要的知识支撑:浏览器对象模型BOM的方法以及一些文档对象模型DOM属性和方法。

讲解原理之前,先来看效果图以及实现代码

基本效果图

网站运行代码demo的图片

具体实现功能的代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf8' />
  5. <title>HTML5学堂 - 网页中的运行代码功能</title>
  6. <style>
  7.     textarea{
  8.         width: 600px;
  9.         height: 400px;
  10.         font-size: 12px;
  11.         font-family: '微软雅黑';
  12.         line-height: 14px;
  13.     }
  14. </style>
  15. </head>
  16. <body>
  17.     <textarea id="codes"><!doctype html>
  18. <html>
  19. <head>
  20.     <meta charset="UTF-8">
  21.     <title>HTML5学堂 - 3D立体块</title>
  22.     <style>
  23.         *{
  24.             margin: 0;padding: 0;
  25.         }
  26.         body{
  27.             -webkit-perspective:0;
  28.         }
  29.         .box{
  30.             margin: 50px auto 0;
  31.         }
  32.         .con{
  33.             margin: 0 auto;
  34.             width: 200px;
  35.             height: 200px;
  36.             position: relative;
  37.             -webkit-transform-style: preserve-3d;
  38.             -webkit-transition: all 2s ease;
  39.         }
  40.         .con:hover{
  41.             -webkit-transform: rotateX(390deg) rotateY(390deg);
  42.         }
  43.         .con p{
  44.             width: 200px;
  45.             height: 200px;
  46.             position: absolute;
  47.             -webkit-backface-visibility:hidden;
  48.         }
  49.         p:nth-child(1){
  50.             background: rgba(255,0,0,0.4);
  51.             -webkit-transform: rotateX(0deg) translateZ(100px);
  52.         }
  53.         p:nth-child(2){
  54.             background: rgba(255,255,0,0.4);
  55.             -webkit-transform: rotateX(180deg) translateZ(100px);
  56.         }
  57.         p:nth-child(3){
  58.             background: rgba(255,0,255,0.4);
  59.             -webkit-transform: rotateX(90deg) translateZ(100px);
  60.         }
  61.         p:nth-child(4){
  62.             background: rgba(0,0,255,0.4);
  63.             -webkit-transform: rotateX(270deg) translateZ(100px);
  64.         }
  65.         p:nth-child(5){
  66.             background: rgba(0,255,255,0.4);
  67.             -webkit-transform: rotateY(90deg) translateZ(100px);
  68.  
  69.         }
  70.         p:nth-child(6){
  71.             background: rgba(0,255,0,0.4);
  72.             -webkit-transform: rotateY(270deg) translateZ(100px);
  73.  
  74.         }
  75.     </style>
  76. </head>
  77. <body>
  78.     <div class='box'>
  79.         <div id="con" class="con">
  80.             <p></p>
  81.             <p></p>
  82.             <p></p>
  83.             <p></p>
  84.             <p></p>
  85.             <p></p>
  86.         </div>
  87.     </div>
  88. </body>
  89. </html></textarea>
  90.     <br>
  91.     <input id='btn' type="button" value="运行代码" />
  92. </body>
  93. <script type="text/javascript">
  94. var btn = document.getElementById('btn');
  95. var thecode = document.getElementById('codes');
  96. btn.onclick = function () {
  97.     var win = window.open('', "_blank", '');
  98.     win.document.open('text/html', 'replace');
  99.     win.opener = null;
  100.     win.document.write(thecode.value);
  101.     win.document.close();
  102. }
  103. </script>
  104. </html>

实现的基本原理:

首先使用open() 方法,打开一个新文档,并擦除当前文档的内容。

opener 属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用。 opener 属性非常有用,创建的窗口可以引用创建它的窗口所定义的属性和函数。

之后,用win.document.write方法。在页面载入过程中用实时脚本创建页面内容,以及用延时脚本创建本窗口或新窗口的内容。打开一个新文档之后,擦除当前文档的内容。(close方法)

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端