これがサンプルコードです(完全に機能します-空のhtmlファイルにコピーするだけで機能します):
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
function Init()
{
var doc = document.getElementById("iView").contentWindow.document;
doc.designMode = "On"
doc.open()
doc.write("<html><head></head><body class='some-class'>Some test text</body></html>");
doc.close();
}
</script>
</head>
<body>
<div id="dlgDiv" style="width:202px; height:72px; border: solid 1px grey">
<iframe id="iView" style="width: 200px; height:70px" frameborder="0"></iframe>
</div>
<script type="text/javascript">
var dlg = null;
jQuery(document).ready(function() {
Init();
dlg = jQuery("#dlgDiv").dialog({
autoOpen: false,
bgiframe: true,
modal: true,
width: 400
})
dlg.dialog('open');
})
</script>
</body>
</html>
これをIEで実行すると、iframeのコンテンツを編集できます。また、IE Developerツールバーを使用すると、iframeの本体が指定したクラス「some-class」を保持していることがわかります。しかし、これをFFで実行すると、iframeは編集できなくなり、FirebugでDOMを検査すると、iframeの本体が空で、クラスがないことがわかります。したがって、FFダイアログの場合、ダイアログにdiv自体(dlgDiv)を使用する代わりに、divの浅いコピーを作成するように見えます...
基本的に、これは、JavaScriptベースのリッチテキストエディターがFFのjQueryダイアログで機能しないことを意味します(そしてGoogle Chromeも同様です)-これは大きな悪い問題です(これまでに2つ試しましたが、この問題を調査し始めました) !!
私がこれにどのように取り組むことができるかについてのアイデア/コメント/提案は、非常に高く評価されています!
ありがとう、アンドレイ