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. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問題2. java - 關(guān)于File的問題?3. docker - 如何修改運(yùn)行中容器的配置4. docker-machine添加一個(gè)已有的docker主機(jī)問題5. node.js - 終端 遠(yuǎn)程連接服務(wù)器,終端關(guān)閉后,服務(wù)器無法運(yùn)行6. python3.x - python連oanda的模擬交易api獲取json問題第五問7. java - instance method中 static后的<K>是什么意思?8. 為什么我ping不通我的docker容器呢???9. javascript - QWebEngineView 如何爬 angular 的動(dòng)態(tài)數(shù)據(jù)?10. 錯(cuò)誤:java.lang.NoSuchMethodError:org.objectweb.asm.ClassWriter。<init>(I)V
