在網(wǎng)頁中運(yùn)行代碼

HTML5學(xué)堂：很多代碼網(wǎng)站當(dāng)中，都會提供運(yùn)行代碼段功能，便于查看代碼效果，那么這個是如何實現(xiàn)的呢？一起來看一下——如何在網(wǎng)頁中運(yùn)行代碼。

HTML5學(xué)堂-劉國利said：應(yīng)該是在2013年的時候，在做一個項目時，自己遇到過這個問題，最初的時候覺得挺麻煩的，但是想了想，又實現(xiàn)出來之后，發(fā)現(xiàn)網(wǎng)頁運(yùn)行代碼，真的挺簡單的。話說，要不要也給當(dāng)前的“HTML5學(xué)堂”網(wǎng)站弄一個運(yùn)行代碼的功能呢？呵呵，過一段時間，如果有閑暇時間的話，就迭代一下這個網(wǎng)站，增加運(yùn)行代碼的功能吧~

需要的知識支撐：瀏覽器對象模型BOM的方法以及一些文檔對象模型DOM屬性和方法。

講解原理之前，先來看效果圖以及實現(xiàn)代碼

基本效果圖

具體實現(xiàn)功能的代碼

HTML5學(xué)堂 - 網(wǎng)頁中的運(yùn)行代碼功能

textarea{

width: 600px;

height: 400px;

font-size: 12px;

font-family: '微軟雅黑';

line-height: 14px;

}

HTML5學(xué)堂 - 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();

}

實現(xiàn)的基本原理：

首先使用open() 方法，打開一個新文檔，并擦除當(dāng)前文檔的內(nèi)容。

opener 屬性是一個可讀可寫的屬性,可返回對創(chuàng)建該窗口的 Window 對象的引用。 opener 屬性非常有用,創(chuàng)建的窗口可以引用創(chuàng)建它的窗口所定義的屬性和函數(shù)。

之后，用win.document.write方法。在頁面載入過程中用實時腳本創(chuàng)建頁面內(nèi)容,以及用延時腳本創(chuàng)建本窗口或新窗口的內(nèi)容。打開一個新文檔之后，擦除當(dāng)前文檔的內(nèi)容。(close方法)

歡迎溝通交流~HTML5學(xué)堂

總結(jié)

以上是生活随笔為你收集整理的HTML阅读打开点击不了,如何让网页文章中的代码可以点击运行的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。