Iframe on load triggering even if iframe is not loaded on Safari

问题

I had problem with iframe that was loading a document using google document viewer, sometimes the document would not load.

I used this solution to check if iframe is successfully loaded, or if it should be reloaded.

The solution works great on pc(chrome), but on iphone(safari) $('#iframe').on('load', ...) event triggers even when there is no content.

On pc on load event is only triggered when iframe is trully loaded and has content.

 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>

回答1:

If relevant to anyone, resolved the Safari issue using the iframe element contentWindow.length. you can get more info here: HTMLIframeElement

When on Safari the onLoad is activated in any case so the onLoad function makes sure content was actually loaded or needs to reload

This is my solution based on the original solution posted here

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

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

回答2:

I failed to make this work properly, so I switched to pdf.js viewer instead of google document viewer. Its missing some minor features that google document viewer has, but at least it works properly every time.

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

来源：https://stackoverflow.com/questions/59140938/iframe-on-load-triggering-even-if-iframe-is-not-loaded-on-safari

标签

javascript

jquery

iframe

mobile

safari