設置iframe的document.designMode后僅Firefox中其body.innerHTML為br
更新時間：2012年02月27日 18:49:48 作者：
設置iframe的document.designMode為On可以讓其可編輯，一般用在富文本編輯器組件中。這里僅列出各瀏覽器差異
重現如下：
<!doctype html>
<html>
<head>
<title>設置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標記。正常情況下輸出ifr.contentWindow.document.body.innerHTML應該是空字符串。但Firefox中有點特殊。
請按下面步驟依次操作。
Firefox中打開該html默認輸出了空字符串
控制臺中執(zhí)行changeDesignMode方法，再執(zhí)行prif方法，這時輸出的innerHTML為“<br>”，如下
Chrome/Safari/Opera輸出的仍然是空字符串。
復制代碼 代碼如下:
<!doctype html>
<html>
<head>
<title>設置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標記。正常情況下輸出ifr.contentWindow.document.body.innerHTML應該是空字符串。但Firefox中有點特殊。
請按下面步驟依次操作。
Firefox中打開該html默認輸出了空字符串
控制臺中執(zhí)行changeDesignMode方法，再執(zhí)行prif方法，這時輸出的innerHTML為“<br>”，如下
Chrome/Safari/Opera輸出的仍然是空字符串。
相關文章
這篇文章主要為大家詳細介紹了js+canvas實現網站背景鼠標吸附線條動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript實例--創(chuàng)建一個歡迎cookie
這篇文章主要介紹了JavaScript實例--創(chuàng)建一個歡迎cookie，2022-01-01
JavaScript調試之console.log調試的一個小技巧分享
日常開發(fā)中經常會需要console來查看當前對象的值。當然用debugger會更全面的查看，但是總有只喜歡用console的，比如我。下面這篇文章主要給大家分享了關于JavaScript調試之console.log調試的一個小技巧，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
這篇文章主要介紹了JavaScript JSON使用原理及注意事項,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了JavaScript捕捉事件和阻止冒泡事件,結合實例形式分析了冒泡的原理及javascript阻止冒泡的相關操作技巧,需要的朋友可以參考下2018-08-08
javascript執(zhí)行環(huán)境及作用域詳解
這篇文章主要為大家詳細介紹了javascript執(zhí)行環(huán)境及作用域，分別針對javascript執(zhí)行環(huán)境及作用域進行探討，感興趣的小伙伴們可以參考一下2016-05-05
使用element-ui的upload組件上傳代碼包時遇到的問題小結
這篇文章主要介紹了使用element-ui的upload組件上傳代碼包時遇到的問題及總結,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要給大家介紹了關于three.js中多線程的使用及性能測試的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要為大家介紹了vue組件通信的幾種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了JS按字節(jié)截取字符長度實例，有需要的朋友可以參考一下2013-11-11