即使 iframe 未在 Safari 上加载，iframe 也会触发加载答案

【问题标题】：Iframe on load triggering even if iframe is not loaded on Safari即使 iframe 未在 Safari 上加载，iframe 也会触发加载
【发布时间】：2020-03-27 04:26:32
【问题描述】：

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

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

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

On pc on load 事件仅在 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 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>

【问题讨论】：

@Lain 我添加了 alert($('#ifm').attr('src'));加载，我得到正确的 url，即使它没有加载
src 属性有点静态，所以不太可靠。 iframe 上的 window.location.href 向您显示实际站点。网站 (=src) 是否存在并有内容？你如何定义内容？
@Lain 我已经在我的问题中添加了 iframe html，iframe src 肯定存在，问题是谷歌文档阅读器经常失败，所以我必须检查 iframe 是否加载成功。跨度>
好吧，我认为 Safari 触发 onload 似乎是正确的。另请注意，Chrome 不会在下载链接上触发事件。

标签： javascript jquery iframe mobile safari

【解决方案1】：

如果与任何人相关，请使用 iframe 元素 contentWindow.length 解决 Safari 问题。你可以在这里获得更多信息： HTMLIframeElement

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

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

iframeLoaded() {
 const contentLoaded = this.refs.iframe.contentWindow.length

 if (!!contentLoaded) {
   clearInterval(this.iframeTimeoutId)
 }
 else {
   this.updateIframeSrc()
 }
}

【讨论】：

【解决方案2】：

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

<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>

【讨论】：