简单问题(如题所述):
是jQuery.ready()在 iframe.contentDocument 上使用时有效？
复杂的问题:
我必须在 CMS 的输入字段上挂接一个 keyup 事件，因此我无法控制 HTML，只能控制脚本。
输入位于嵌套在另一个 iframe 中的 iframe 内，因此有一个顶部窗口(浏览器窗口)、一个 iframe(我们称之为 iframe1)和其中的另一个 iframe(我们称之为 iframe2)。脚本和 jQuery 位于 <head>顶部窗口的一部分。
我不是很喜欢setTimeout/setInterval , 所以我最初的想法是使用 jQuery.ready()像这样(我省略了选择 iframe 的代码):
$(document).ready(function(){
$(iframe1.contentDocument).ready(function(){
$(iframe2.contentDocument).ready(function(){
$("input").keyup(function(){ /* Do stuff */ });
});
});
});
问题是，到时候 .ready()在 iframe1 上触发我可以检查 iframe1.contentDocument.body.innerHTML结果是一个空字符串。不是人们所期望的。因此，代码无法绑定(bind) keyup 事件。
万一有人在想“你使用的是正确的选择器上下文吗？”:是的，我在正确的文档中选择了 iframe 元素(尽管上面的代码片段可能没有完全说明这一点，因为我想保持简单).也不存在任何同源策略问题 - 所有 iframe 和父窗口都在同一个域中。
使用 $(window).load()似乎可行，但等待加载图像等的等待时间太长，应用程序无法接受。
有没有办法实现jQuery.ready()无需使用 jQuery.load() 即可在 iframe 上运行的功能？
最佳答案
我不确定这是否暗示您厌恶使用 $(window).load() 但您可以将 load() 直接绑定(bind)到 iframe并尽可能接近，而无需直接访问添加 jquery 的 iframe 内容。
我过去做过类似的事情，根据内容的高度动态调整 iframe 的大小。这是一个可能没有直接关系的示例，但您应该能够了解它正在做的事情的要点。
$(function(){
var $content_iframe = $('#content_iframe')
$content_iframe.load(
function(){
var contentHeight = $content_iframe.contents().find('html body').height();
if (contentHeight > 1070){
$(this).height(contentHeight + 30);
}
else{
$(this).height(1100);
}
}
);
})
就图像加载时间等而言，这可能有相同的缺点。祝你好运!
关于javascript - jQuery.ready() 在 iframe.contentDocument 上使用时有效吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5870104/