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. html - 如何刪除css文件中沒有被引用的類?2. CSS 的 ID 和 Class 有什么區(qū)別?如何正確使用它們?3. android - 求 360瀏覽器 百度瀏覽器 搜狗瀏覽器的最新啟動(dòng)類名4. vue.js - vue 打包后 nginx 服務(wù)端API請(qǐng)求跨域問題無法解決。5. javascript - WebSocket接收到的信息是二進(jìn)制該怎么解析它?6. index.php錯(cuò)誤,求指點(diǎn)7. selenium-selenium-webdriver - python 將當(dāng)前目錄加入到 環(huán)境變量8. python沒入門,請(qǐng)教一個(gè)問題9. 一個(gè)sql注入錯(cuò)誤,求哪位大神解決一下10. 好奇,求大神解答,類似淘寶的大購物量網(wǎng)站,訂單數(shù)據(jù)表該怎么設(shè)計(jì)?
