Javascript：在 jQuery 对话框中时，iframe 的设计模式无法与 FF 一起使用
这是示例代码（完全有效 - 只需复制到一个空的 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 开发工具栏，我可以看到 iframe 的主体保留了我指定的“some-class”类。 但是，当在 FF 中运行它时，iframe 不可编辑，并且当使用 firebug 检查其 DOM 时，我看到 iframe 的主体是空的并且没有类。所以看起来 FF 对话框会制作 div 的浅表副本，而不是使用 div 本身（dlgDiv）作为对话框，或者类似的东西......
基本上这意味着基于 javasript 的富文本编辑器都不能在 jQuery 对话框中工作FF（顺便说一句，还有 Google Chrome）——这是一个很大的坏问题（到目前为止我已经尝试了两个，这就是我开始研究这个问题的方式）！
任何关于我如何解决这个问题的想法/评论/建议，我们都非常感激！
谢谢你， 安德烈
here's the sample code (fully working - just copy to an empty html file and it will work):
<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>
Now, when I run this in IE, I can edit contents of iframe; also using IE Developer Toolbar I can see that body of iframe preserves class "some-class" I specified.
But, when running this in FF, iframe is not editable, and when inspecting its DOM with firebug, i see that iframe's body is empty and has no class. So looks like for FF dialog makes a shallow copy of the div instead of using the div itself (dlgDiv) for dialog, or something like that...
Basically that means that NONE of javasript based rich text editors would work in a jQuery dialog in FF (and btw Google Chrome as well) - thats a big bad issue (I have tried two so far and that's how I started looking into this issue)!
Any ideas/comments/suggestions on how I could approach this, are highly appreciated!
Thank you,
Andrey
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
init 应该在 open 之后
the init should be after the open