iframe、pdf 和 Internet Explorer 的焦点答案

【问题标题】：Iframes, pdfs and focus with internet exploreriframe、pdf 和 Internet Explorer 的焦点
【发布时间】：2010-10-21 15:18:13
【问题描述】：

所以 - 我有一个页面，其中包含一个 textarea 和一个动态创建的 IFrame，它使用 adobe acrobat 插件显示 PDF。

最初，文本区域被聚焦。

我希望 textarea 获得焦点，但加载 pdf 时 IFrame 会窃取焦点。

在 Firefox 中，将 textarea 重置为焦点元素是很简单的。

我通过监听 iframe“加载”事件然后在文本框上调用 .focus() 来做到这一点。

M$ IE 不会为动态创建的 Iframe 触发 onload 事件，因此要确定它何时准备就绪，我使用 IFrame 的 readyState 属性：

var ieIframeReadyHandler = function() { 
    if( iframe.readyState=="complete" ) {
           textarea.focus();
    } else {
        setTimeout(ieIframeReadyHandler, 100);
    }
}


setTimeout(ieIframeReadyHandler, 100);

注意：我不听 iframe 的 readystatechanged 事件，因为它似乎不会为 readyState=="complete" 案例触发！！

那么当这段代码执行时会发生什么？.....好吧，什么都没有。 Iframe pdf 仍然是焦点，但是如果我使用 document.activeElement 检查哪个元素具有焦点（以前这只是 IE，但是 firefox 3 现在支持这一点）我被告知 textarea 确实有焦点！！

什么鬼？？！？

有什么想法吗？

【问题讨论】：

IFRAME的DOM类型是什么（文件后缀...）
不确定 iframe 的类型是什么意思？据我所知，type 不是 Internet Explorer 的 DOM 元素的属性。您是指内容的文档类型吗？我通过设置 src 属性指向 pdf...

标签： internet-explorer pdf iframe adobe focus

【解决方案1】：

尝试将焦点设置延迟 200-500 毫秒。这是很常见的 IE 问题。

编辑：

在 IFRAME 中使用 onLoad 事件：

<body onLoad="parent.window.check_focus()"> .... </body>

【讨论】：

IFrame 将仅包含 PDF 内容，不包含 HTML。因此，您将无法连接 body 的 onload 事件。
@Kirtan：最好将其合并到元素中。阅读下一个答案的 cmets。

【解决方案2】：

iframe.attachEvent("onload", function(){ }) 是在 IE 中执行 iframe onload 事件的方式。

【讨论】：

【解决方案3】：

在 Internet Explorer 中，iframe 的 readystate 属性仅在 iframe 内部更新，而不在其外部更新。无论出于何种原因，这是设计使然。没有可靠的方法可以从 iframe 外部确定 iframe 内容是否已加载。

如果 iframe 在页面加载时立即显示并不重要，您可以等待加载它，直到用户请求它（通过链接或按钮）。这样他们就可以期待了。

如果 PDF 在本地托管（或者您不介意进行一些缓存），另一种选择是使用 Flash 和来自SWFTools 的 PDF2SWF 等工具在后端进行转换。

【讨论】：

我在 AJAX 之前使用了 iframe，从任何其他窗口（使用“父”属性）为 iframe 的 onLoad 事件设置处理程序绝对没有问题。 F.e:
在 iframe 中为 HTML 文档的 body 元素设置 onLoad 与为 iframe 本身设置不同。除非我误会你？在 ListenToRick 的问题中，iframe 中的内容是 PDF，因此没有 body 元素可以设置事件。
readyState 属性确实发生了变化，并且可以被父 js 访问——我已经在上面演示了！
所以当 iframe 处于 readyState="complete" 状态时，我能够在文本框上成功调用 .focus ，正如我上面提到的，父页面确实认为文本框是焦点元素对于父页面。也许父页面本身没有焦点？
这种情况下的问题是readystate是错误的。尝试加载一个大的 PDF（50mb 左右）。 iframe 的就绪状态将在不到一秒的时间内设置为“完成”，但 PDF 尚未完成加载！事件的顺序似乎是：1）插件加载（就绪状态为“完成”），2）插件完成下载第一页（设置焦点在 iframe），3）插件继续下载文档的其余部分。如果将焦点设置在 1 和 2 之间，大多数情况下它会立即再次丢失。如果您按照 Thevs 的指示使用更长的延迟，只要插件及时加载，它就会正常工作。