html5 - 這個代碼顯示功能如何實現?
問題描述
我想知道,左邊是html +js ,右邊顯示,這樣的網頁是怎樣做到的?它的原理是什么?
我下載了wp fiddle,發現不能用在我最新版本的wordpress,想自己實現。
提交代碼的時候,觸發了一個submitTryit() 函數,這個函數倒很簡單
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設為右邊iframe即可
回答2:這個頁面使用了iframe,見下圖
左邊p#contenteditable,右邊p.html(contenteditable.html())不行么?
相關文章:
1. macos - mac下docker如何設置代理2. dockerfile - 為什么docker容器啟動不了?3. 請教各位大佬,瀏覽器點 提交實例為什么沒有反應4. javascript - 移動端,當出現遮罩層的時候,遮罩層里有div是超出高度scroll的,怎么避免滑動div的時候,body跟隨滑動?5. javascript - 用rem寫的頁面,安卓手機顯示文字是正常的,蘋果顯示的文字是特別小的是為什么呢6. javascript - webapp業務流程基本一致,多套主題(樣式基本不一樣,交互稍有偏差)管理,并且有不斷有新增主題,該如何設計組件化架構?7. javascript - 從mysql獲取json數據,前端怎么處理轉換解析json類型8. apache - 本地搭建wordpress權限問題9. javascript - JS設置Video視頻對象的currentTime時出現了問題,IE,Edge,火狐,都可以設置,反而chrom卻...10. 新手 - Python 爬蟲 問題 求助
