我正在创建一个富文本编辑器。
基本上我有一个启用了设计模式的 iframe。我希望它在用户在输入或粘贴文本时接近 iframe 底部时自动调整大小。
我有改变大小的功能。
function changeHeight() {
$(iframe).height($(iframe.contentWindow.document).height());
}
我只需要添加一个监听器。我这辈子都找不到合适的！
有什么想法吗？
非常感谢
-会
【问题讨论】：
height 不是监听器，不妨查看jQuery api？
标签： javascript jquery bind listeners rte
执行此操作：http://sonspring.com/journal/jquery-iframe-sizing 并添加一个 onkeypress 侦听器以检查调整大小。
公平警告：如果内容不在同一个域中 --- 由于 XSS 漏洞预防，它将不起作用（在这种情况下您不能捕获按键事件）。
这已经在 IE7 中进行了测试，可以在大多数浏览器上运行。您实际上也没有附加到 iFrame 本身，而是附加到您感兴趣的元素（很可能是主体）。
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#IFRAME').contents().find('textarea').bind('keypress', function() {
//Dostuff
})
});
</script>
<iframe src="/whatever.html" width="800" height="400" id="IFRAME" ></iframe>
您在 iframe 中有一个 textarea（或 div 或其他什么）...将过滤器更改为您的心脏内容。 iframe 调整大小代码显示在 sonspring 文章中。
**
再次编辑直接附加到 IFRAME 的代码
Source [仅替换了原生 DOM 的 jQuery 函数。当我有更多时间时，我会清理我可以清理的]： http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_25589672.html
**
<script>
$(document).ready(function() {
var f = $('#IFRAME')[0];
var fwin = f.contentWindow || f.contentDocument;
fwin.document.designMode = 'on';
var evt_key = function(e) {
e = e || fwin.event;
var range = null, ret = null;
if (fwin.document.selection) {
range = fwin.document.selection.createRange();
ret = range.parentElement();
}
else if (fwin.window.getSelection) {
var range = fwin.window.getSelection().getRangeAt(0);
ret = range.commonAncestorContainer.parentNode || fwin.document;
}
fwin.parent.eventCallback();
};
if (fwin.document.attachEvent) {
fwin.document.attachEvent('onkeypress', evt_key);
}
else if (fwin.document.addEventListener) {
fwin.document.addEventListener('keypress', evt_key, false);
}
})
function eventCallback() {
alert('Key Pressed');
}
</script>
<iframe src="#" width="800" height="400" id="IFRAME" ></iframe>
【讨论】：