Iframe在附加内容之外不能再点击
iframe not clickable anymore outside appended content
我从这个线程得到了这个简单的iframe文本编辑器。我一直试图使一个"回复引用"功能附加一个帖子内容与html标签的编辑器。但是我遇到了一个问题,让iframe
主体可点击,并在灰色追加的div元素之外输入文本。有没有办法让身体再次可点击?
<div class='margin'><div class='content'><h4>wreeeeeeeeee dsfsd sdfd sddfsfdsf</h4></div> <button id='reply'>Quote</button>
<div>
<a id="bold" class="font-bold">B</a>
<a id="italic" class="italic">I</a>
<select id="fonts">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
</select>
<br/>
<iframe id="textEditor" style="width:500px; height:170px;">
</iframe>
<input type='hidden' name='comments' id='comments' />
<input id='submit'type='submit' value='submit'/>
代码: document.getElementById('textEditor').contentWindow. document.designMode="on";
document.getElementById('textEditor').contentWindow. document.close();
$("#bold").click(function(){
if($(this).hasClass("selected"))
{
$(this).removeClass("selected");
}else
{
$(this).addClass("selected");
}
boldIt();
});
$("#italic").click(function(){
if($(this).hasClass("selected"))
{
$(this).removeClass("selected");
}else
{
$(this).addClass("selected");
}ItalicIt();
});
$("#fonts").change(function(){
changeFont($("#fonts").val());
});
function boldIt()
{
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("bold", false, "");
edit.focus();
}
function ItalicIt()
{
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("italic", false, "");
edit.focus();
}
function changeFont(font)
{
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("FontName", false, font);
edit.focus();
}
$('#textEditor').contents().find('body').css("word-wrap", "break-word");
$('#reply').click(function(){
var content = $(this).prev().html();
$("#textEditor").contents().find("body").html('<div style="background:grey;color:#fff;border:1px solid #222">Reply to someone<br>'+content+'</div>');
});
(原谅我没有将示例代码转换回jQuery语法,但我在我的尝试中得到了未定义的文档错误)
Try
$('#textEditor').contents().find('body')
.css("word-wrap", "break-word")
.on("keyup", function(e) {
var _break = $(e.target);
if (_break.children().is(".break")) {
$.noop();
} else {
_break.find("div")
.after("<br class=break />");
};
});
$('#reply').click(function(){
var content = $(this).prev().html();
var frame = $("#textEditor").contents();
frame.find("body")
.append('<div style="background:grey;color:#fff;border:1px solid #222">'
+'Reply to someone<br>'+content+'</div>');
frame.find("div")
.after("<br class=break />");
});
jsfiddle http://jsfiddle.net/guest271314/Kxmaf/568/
相关文章:
- 为什么jQuery代码段在没有IFrame的情况下可以工作,而在有IFrame时却不能工作
- Iframe加载调整大小在Chrome中工作,但不能在IE或Firefox中工作
- 缺少 iframe ie8.相对定位不能解决问题
- 更改花式框iframe的大小-我可以更改宽度,但不能更改高度
- 为什么 jQuery 在使用样式标签填充 iframe 时会删除正文和头部标签,但不能没有样式标签
- $(“Iframe”).contents()在本地主机上工作,但不能联机
- 将属性添加到iframe'的body可以在Chrome中使用,但不能在Firefox中使用
- Ext应用程序不能在iframe内运行-权限被拒绝
- 使用FB后,不能在iframe应用程序中编辑输入字段.登录Firefox浏览器
- 在IE8中,鼠标滚轮不能与jScrollPane一起工作(没有iframe!)
- 不能从iframe中调用parent中的函数
- Iframe在附加内容之外不能再点击
- IE9 iframe窗口删除后,将不能执行代码从一个释放的脚本
- 如何检测如果一个网站不能通过iframe嵌入
- 不能在FF或IE中写入iframe,只能在Chrome中
- 不能用jQuery将link元素附加到iframe中
- iframe自动高度调整在IE中不能很好地工作
- Iframe不能与safari/firefox一起工作
- 为什么jQuery carousel不能与iframe一起工作?
- AngularJS{{}}占位符不能在Iframe标签中工作