Firefox的iframe设计模式不起作用
[英]firefox iframe designmode not working
问题描述
i have web application where users can type on iframe(rich-text-editor) when they click a button an iframe will show up. 
我有一个Web应用程序，用户可以在其中单击一个iframe的按钮时在iframe（富文本编辑器）上键入内容。 html code when user click button for new iframe : <input name="add_button" type="button" value="New frame" onClick="javascript:add_new_frame();"/> 用户单击新iframe按钮时的html代码： <input name="add_button" type="button" value="New frame" onClick="javascript:add_new_frame();"/>
javascript code for creating iframe and designmode 用于创建iframe和designmode的javascript代码
function add_new_frame(){
$("<iframe class=\"a\" id="a" name="a"/>").appendTo(id);
var editor = document.getElementById ("a");
editorDoc = editor.contentWindow.document;
editorDoc1 = document.getElementById ("a").contentDocument;
var editorBody = editorDoc.body;
if ('spellcheck' in editorBody) { // Firefox
editorBody.spellcheck = false;
}
if ('contentEditable' in editorBody) {
// allow contentEditable
editorBody.contentEditable = true;
editorDoc1.designMode = "on";
}
else {
if ('designMode' in editorDoc1) {
editorDoc1.designMode = "on";
}
}
}
I have tested above on (chrome,opera,safari,IE) and it's working fine. 我已经在（chrome，opera，safari，IE）上进行了测试，并且工作正常。 However, it's not working on FF, the iframe is showing up but i cannot edit it (designmode is not working). 但是，它在FF上不起作用，iframe出现了，但是我无法对其进行编辑（designmode不起作用）。 is there any solution? 有什么解决办法吗？ sorry for bad english 对不起，英语不好
2 个解决方案
解决方案1
0 2015-01-29 07:23:29
You missed \\ in your iframe element to mask the " 您错过了iframe元素中的\\来掩盖“
function add_new_frame(){
$("<iframe class=\"a\" id=\"a\" name=\"a\"/>").appendTo(id);
var editor = document.getElementById ("a");
editorDoc = editor.contentWindow.document;
editorDoc1 = document.getElementById ("a").contentDocument;
var editorBody = editorDoc.body;
if ('spellcheck' in editorBody) { // Firefox
editorBody.spellcheck = false;
}
if ('contentEditable' in editorBody) {
// allow contentEditable
editorBody.contentEditable = true;
editorDoc1.designMode = "on";
}
else {
if ('designMode' in editorDoc1) {
editorDoc1.designMode = "on";
}
}
}
解决方案2
0 2015-01-29 08:35:27
<html> <head> <title>Untitled Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$ = jQuery;
function frame() {
$("<iframe class=\"a\" id=\"a\" name=\"a\"/>").appendTo(id);
var editor = document.getElementById("a");
editorDoc = editor.contentWindow.document;
editorDoc1 = document.getElementById("a").contentDocument;
var editorBody = editorDoc.body;
if ('spellcheck' in editorBody) { // Firefox
editorBody.spellcheck = false;
}
if ('contentEditable' in editorBody) {
// allow contentEditable
editorBody.contentEditable = true;
editorDoc1.designMode = "on";
}
else {
if ('designMode' in editorDoc1) {
editorDoc1.designMode = "on";
}
}
}
</script>
</head>
<body>
<input name="add_button" type="button" value="New frame" onclick="frame()" />
<p id="id">
contents</p>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.