設(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中有點特殊。
請按下面步驟依次操作。
Firefox中打開該html默認(rèn)輸出了空字符串
控制臺中執(zhí)行changeDesignMode方法，再執(zhí)行prif方法，這時輸出的innerHTML為“<br>”，如下
Chrome/Safari/Opera輸出的仍然是空字符串。
復(fù)制代碼 代碼如下:
<!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中有點特殊。
請按下面步驟依次操作。
Firefox中打開該html默認(rèn)輸出了空字符串
控制臺中執(zhí)行changeDesignMode方法，再執(zhí)行prif方法，這時輸出的innerHTML為“<br>”，如下
Chrome/Safari/Opera輸出的仍然是空字符串。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了5分鐘打造簡易高效的webpack配置,詳細(xì)的介紹了打包調(diào)試、提取公共代碼、壓縮、熱替換等配置，有興趣的可以了解一下2017-07-07
下面小編就為大家?guī)硪黄狫S非空驗證及郵箱驗證的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
關(guān)于Iframe父頁面與子頁面之間的相互調(diào)用
下面小編就為大家?guī)硪黄P(guān)于Iframe父頁面與子頁面之間的相互調(diào)用。小編覺得挺不錯的，希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-11-11
這篇文章主要介紹了一些老手都不一定知道的JavaScript技巧,需要的朋友可以參考下2014-05-05
javascript兩種function的定義介紹及區(qū)別說明
javascript兩種function的定義方式function a(){}和a=function(){}具體使用如下，感興趣的朋友可以參考下，希望對你對你學(xué)習(xí)function的定義有所幫助2013-05-05
這篇文章主要為大家詳細(xì)解析了bootstrap下拉菜單使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
JavaScript實現(xiàn)環(huán)繞鼠標(biāo)旋轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)環(huán)繞鼠標(biāo)旋轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
JavaScript.The.Good.Parts閱讀筆記（一）假值與===運算符
JavaScript 假值與===運算符，學(xué)習(xí)js的朋友可以看下。2010-11-11
這篇文章主要為大家詳細(xì)介紹了Javascript數(shù)組常用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-02-02
這篇文章主要介紹了JavaScript鼠標(biāo)懸停事件用法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05