html5 - 這個代碼顯示功能如何實(shí)現(xiàn)?
問題描述
我想知道,左邊是html +js ,右邊顯示,這樣的網(wǎng)頁是怎樣做到的?它的原理是什么?
我下載了wp fiddle,發(fā)現(xiàn)不能用在我最新版本的wordpress,想自己實(shí)現(xiàn)。
提交代碼的時候,觸發(fā)了一個submitTryit() 函數(shù),這個函數(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:左邊是一個表單。書寫代碼,右邊是iframe,左邊代碼form的target設(shè)為右邊iframe即可
回答2:這個頁面使用了iframe,見下圖
左邊p#contenteditable,右邊p.html(contenteditable.html())不行么?
相關(guān)文章:
1. 前端 - CSS3問題:請問-webkit-background-clip屬性,需要寫在background屬性后面嗎?2. angular.js - angular里的ui-view里,獲取當(dāng)前頁面的狀態(tài)參數(shù)用$state.params,在vue里類似的語法是什么呢?3. javascript - 按鈕鏈接到另一個網(wǎng)址 怎么通過百度統(tǒng)計(jì)計(jì)算按鈕的點(diǎn)擊數(shù)量4. 微信開放平臺 - ios APP能不能打開微信然后通過微信跳轉(zhuǎn)到指定的URL?5. 淺談vue生命周期共有幾個階段?分別是什么?6. node.js - nodejs+express+vue7. Mysql啟動發(fā)生系統(tǒng)錯誤10678. nginx - vue-cli生成的項(xiàng)目打包發(fā)到服務(wù)器后怎么代理api?9. html5 - h5+中webview的show方法有延遲10. 大家好,我想請問一下怎么做搜索欄能夠搜索到自己網(wǎng)站的內(nèi)容。
