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. angular.js - angular ng-class里面的引號問題2. css - 對于類選擇器使用的問題3. javascript - Web微信聊天輸入框解決方案4. docker - 如何修改運行中容器的配置5. html - vue項目中用到了elementUI問題6. 網頁爬蟲 - 用Python3的requests庫模擬登陸Bilibili總是提示驗證碼錯誤怎么辦?7. javascript - Ajax加載Json時,移動端頁面向左上角縮小一截兒,加載完成后才正常顯示,這該如何解決?8. javascript - 有沒有什么好的圖片懶加載的插件,需要包含監聽頁面滾動高度,然后再加載的功能9. python - 為什么在main()函數里result 會變成那樣?10. mysql無法添加外鍵
