iframe動態新增html

2022-08-14 14:30:12 字數 972 閱讀 8046

最近專案中有個詳細預覽功能,詳細中的某個字段存放的是完整的html,在頁面中需要正常展示。

那麼問題來了:

1、需要展示的html中的樣式會與外面的頁面衝突。

2、直接載入資料中的html,可能存著一些指令碼錯誤。

首先想到的解決辦法是用iframe,但是iframe是直接載入某個頁面。所以需要動態的新增html內容到iframe中。

$('

var o = document.getelementbyid("myframe");

ed = document.all ?o.contentwindow.document : o.contentdocument;

ed.open();

ed.write(data);

ed.close();

ed.contenteditable = true

;ed.designmode = 'on';

$(this).click(function

(event) )

經測試,沒有效果。於是想起可以通過樣式取消點選效果。

但是這樣iframe的滾動條也不能點選了,於是想起樣式可以加在文件裡面,修改**如下:

$('

var o = document.getelementbyid("myframe");

ed = document.all ?o.contentwindow.document : o.contentdocument;

ed.open();

ed.write(`

$`);

ed.close();

ed.contenteditable = true

; ed.designmode = 'on';

經測試,iframe中的html不能點選,預期的取消了點選事件的效果。

動態新增html

多瀏覽器情況下,動態新增html文字時會出現無法獲取動態插入的內容,需要改動.html 方法。textarea無法通過id進行賦值,換用 其他方式。同時,由於 動態新增文字時,firefox 用innertext 在頁面上看不到文字,故使用innerhtml 對textarea進行賦值 functi...

jQuery動態新增html

在日常 web 開發中,經常遇到需要操作html dom 今天我們來總結下通過jquery來動態新增 html 首先我們來對這些方法做個總結 01 html html 函式的作用原理是先移除匹配元素內部的html 然後將新的html新增到匹配元素 設定內容 當使用該方法返回乙個值時,它會返回第乙個匹...

Html元素動態新增方法

今天做東東的時候要用 js建立 html 元素然後動態給該元素新增方法,走了不少彎路。最後把解決方法發布,讓大家以後少走彎路。js檔案 function checknull id varchecknewnull function id 給html 元素新增方法 建立乙個 textarea std2a...