html5 - 這個代碼顯示功能如何實現(xiàn)?
問題描述
我想知道,左邊是html +js ,右邊顯示,這樣的網(wǎng)頁是怎樣做到的?它的原理是什么?
我下載了wp fiddle,發(fā)現(xiàn)不能用在我最新版本的wordpress,想自己實現(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. 我在centos容器里安裝docker,也就是在容器里安裝容器,報錯了?2. 在windows下安裝docker Toolbox 啟動Docker Quickstart Terminal 失敗!3. docker-compose中volumes的問題4. docker不顯示端口映射呢?5. golang - 用IDE看docker源碼時的小問題6. docker內(nèi)創(chuàng)建jenkins訪問另一個容器下的服務(wù)器問題7. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””8. javascript - 最近用echarts做統(tǒng)計圖時遇到兩個問題!!9. javascript - 連續(xù)點擊觸發(fā)mouseleave事件10. mac里的docker如何命令行開啟呢?

網(wǎng)公網(wǎng)安備