設(shè)置iframe的document.designMode后僅Firefox中其body.innerHTML為br

更新時間：2012年02月27日 18:49:48 作者：

設(shè)置iframe的document.designMode為On可以讓其可編輯，一般用在富文本編輯器組件中。這里僅列出各瀏覽器差異

重現(xiàn)如下：

 
<!doctype html> 
<html> 
<head> 
<title>設(shè)置iframe的document.designMode后僅Firefox中其body.innerHTML為br</title> 
<meta charset="utf-8"> 
</head> 
<body> 
<iframe frameborder="1" style="height: 330px;"></iframe> 
<script> 
var ifr = document.getElementsByTagName('iframe')[0]; 
var doc = ifr.contentWindow.document; 
function prif() { 
console.log(ifr.contentWindow.document.body.innerHTML); 
} 
function changeDesignMode() { 
ifr.contentWindow.document.designMode = 'On'; 
} 
prif(); 
</script> 
</body> 
</html> 

以上代碼iframe的body中沒有寫入任何html標(biāo)記。正常情況下輸出ifr.contentWindow.document.body.innerHTML應(yīng)該是空字符串。但Firefox中有點(diǎn)特殊。
請按下面步驟依次操作。
Firefox中打開該html默認(rèn)輸出了空字符串

控制臺中執(zhí)行changeDesignMode方法，再執(zhí)行prif方法，這時輸出的innerHTML為“<br>”，如下

Chrome/Safari/Opera輸出的仍然是空字符串。

您可能感興趣的文章:

designMode

相關(guān)文章

js+canvas實(shí)現(xiàn)網(wǎng)站背景鼠標(biāo)吸附線條動畫
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)網(wǎng)站背景鼠標(biāo)吸附線條動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
JavaScript實(shí)例--創(chuàng)建一個歡迎cookie
這篇文章主要介紹了JavaScript實(shí)例--創(chuàng)建一個歡迎cookie，
2022-01-01
JavaScript調(diào)試之console.log調(diào)試的一個小技巧分享
日常開發(fā)中經(jīng)常會需要console來查看當(dāng)前對象的值。當(dāng)然用debugger會更全面的查看，但是總有只喜歡用console的，比如我。下面這篇文章主要給大家分享了關(guān)于JavaScript調(diào)試之console.log調(diào)試的一個小技巧，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-08-08
JavaScript JSON使用原理及注意事項
這篇文章主要介紹了JavaScript JSON使用原理及注意事項,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-07-07
JavaScript捕捉事件和阻止冒泡事件實(shí)例分析
這篇文章主要介紹了JavaScript捕捉事件和阻止冒泡事件,結(jié)合實(shí)例形式分析了冒泡的原理及javascript阻止冒泡的相關(guān)操作技巧,需要的朋友可以參考下
2018-08-08
javascript執(zhí)行環(huán)境及作用域詳解
這篇文章主要為大家詳細(xì)介紹了javascript執(zhí)行環(huán)境及作用域，分別針對javascript執(zhí)行環(huán)境及作用域進(jìn)行探討，感興趣的小伙伴們可以參考一下
2016-05-05
使用element-ui的upload組件上傳代碼包時遇到的問題小結(jié)
這篇文章主要介紹了使用element-ui的upload組件上傳代碼包時遇到的問題及總結(jié),本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-12-12
three.js中多線程的使用及性能測試詳解
這篇文章主要給大家介紹了關(guān)于three.js中多線程的使用及性能測試的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
javascript Blob對象實(shí)現(xiàn)文件下載
這篇文章主要為大家介紹了vue組件通信的幾種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
JS按字節(jié)截取字符長度實(shí)例
這篇文章主要介紹了JS按字節(jié)截取字符長度實(shí)例，有需要的朋友可以參考一下
2013-11-11