加载时触发 Iframe，即使 iframe 未在 Safari 上加载

Question

我在使用谷歌文档查看器加载文档的 iframe 时遇到问题，有时文档无法加载。

我使用此解决方案来检查 iframe 是否已成功加载，或者是否应该重新加载。

该解决方案在pc(chrome(上运行良好，但在iphone(safari(上，即使没有内容，也可以触发($#iframe'(.on('load'，...(事件触发器。

在 PC 上加载事件仅在 iframe 真正加载并包含内容时触发。

function reloadIFrame() {
document.getElementById("ifm").src=document.getElementById("ifm").src;
}
ints.push( setInterval("reloadIFrame();", 2000));
$( document ).ready(function() {
$('#ifm').on('load', function() {
// this event fires even when there is no content on safari
// ....stop reloading the iframe etc.....
alert($('#ifm').attr('src')); // this gives me correct url, even when not loaded

Iframe：

<iframe data-iframe="true" id="ifm" data-ext="<?php echo $ext ?>" 
class="document-iframe"  
src="<?php echo $full_src ?>" data-tool-id="<?php echo $tool->ID ?>">
</iframe>

Answer 1

如果与任何人相关，请使用 iframe 元素 contentWindow.length 解决了 Safari 问题。 您可以在此处获取更多信息： HTMLIframeElement

在 Safari 上时，在任何情况下都会激活 onLoad 功能，因此 onLoad 函数可确保内容实际加载或需要重新加载

这是我基于此处发布的原始解决方案的解决方案

iframeLoaded() {
const contentLoaded = this.refs.iframe.contentWindow.length
if (!!contentLoaded) {
clearInterval(this.iframeTimeoutId)
}
else {
this.updateIframeSrc()
}
}

Answer 2

我未能正常工作，所以我切换到pdf.js查看器而不是google文档查看器。它缺少谷歌文档查看器具有的一些次要功能，但至少它每次都能正常工作。

<iframe height='100%' class="document-iframe" width='100%' scrolling='no' 
allowfullscreen webkitallowfullscreen src='<?php echo get_template_directory_uri() 
?>/web/viewer.html?file=<?php echo $src ?>'>
</iframe>