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. python 計算兩個時間相差的分鐘數,超過一天時計算不對2. javascript - 使用form進行頁面跳轉,但是很慢,如何加一個Loading?3. javascript - 后臺管理系統左側折疊導航欄數據較多,怎么樣直接通過搜索去定位到具體某一個菜單項位置,并展開當前菜單4. javascript - ES6規范下 repeat 函數報錯 Invalid count value5. docker-machine添加一個已有的docker主機問題6. docker-compose中volumes的問題7. angular.js - 輸入郵箱地址之后, 如何使其自動在末尾添加分號?8. javascript - html5的data屬性怎么指定一個function函數呢?9. javascript - JS 里面的 delete object.key 到底刪除了什么?10. html5 - 為什么使使用vue cli 腳手架,post-css 沒有自動對css3屬性自動添加瀏覽器前綴呢?
