html5 - 這個(gè)代碼顯示功能如何實(shí)現(xiàn)?
問題描述
我想知道,左邊是html +js ,右邊顯示,這樣的網(wǎng)頁是怎樣做到的?它的原理是什么?
我下載了wp fiddle,發(fā)現(xiàn)不能用在我最新版本的wordpress,想自己實(shí)現(xiàn)。
提交代碼的時(shí)候,觸發(fā)了一個(gè)submitTryit() 函數(shù),這個(gè)函數(shù)倒很簡單
function submitTryit(){var t=document.getElementById('TestCode').value;t=t.replace(/=/gi,'w3equalsign');t=t.replace(/script/gi,'w3scrw3ipttag');document.getElementById('code').value=t;document.getElementById('tryitform').action='v.asp';validateForm();document.getElementById('tryitform').submit();}function validateForm(){var code=document.getElementById('code').value;if (code.length>5000) { document.getElementById('code').value='<h1>Error</h1>'; }}
問題解答
回答1:左邊是一個(gè)表單。書寫代碼,右邊是iframe,左邊代碼form的target設(shè)為右邊iframe即可
回答2:這個(gè)頁面使用了iframe,見下圖
左邊p#contenteditable,右邊p.html(contenteditable.html())不行么?
相關(guān)文章:
1. javascript - 如何判斷用戶切換到了當(dāng)前標(biāo)簽頁?2. javascript - H5頁面怎么查看console信息?3. css - 移動(dòng)端 盒子內(nèi)加overflow-y:scroll后 字體會(huì)變大4. javascript - webpack 報(bào)錯(cuò) 新人 求解5. java - 在搭建ssm的過程中 用junit測試Dao層 怎么樣都報(bào)錯(cuò) 說連接不上jdbc6. linux - Ubuntu下編譯Vim8(+python)無數(shù)次編譯失敗7. java - Mybatis關(guān)聯(lián)查詢8. 前端 - CSS3 box-shadow如何設(shè)置,或者用什么方法可以產(chǎn)生圖中這樣陰影的效果。9. nginx 80端口反向代理多個(gè)域名,怎樣隱藏端口的?10. java - 新手做一個(gè)安卓視頻播放器,想實(shí)現(xiàn)一個(gè)進(jìn)度條,按鈕那種在視頻下方懸浮的功能,不知道思路!
