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. docker-compose中volumes的問題2. mysql 一個sql 返回多個總數3. CSS3 畫如下圖形4. 在mac下出現了兩個docker環境5. 如何用筆記本上的apache做微信開發的服務器6. android - rxjava merge 返回Object對象數據如何緩存7. javascript - 螞蟻金服里的react Modal方法,是怎么把元素插入到頁面最后的8. python - Scrapy存在內存泄漏的問題。9. docker 下面創建的IMAGE 他們的 ID 一樣?這個是怎么回事????10. angular.js - ionic2 瀏覽器跨域問題
