每次 iframe 加载页面时显示加载 gif

Question

我希望每当在 iframe 中加载新页面时，在父 window 的 iframe 上显示正在加载的 GIF。我见过类似问题的解决方案，但它们似乎只适用于默认页面。一旦用户在 iframe 中离开该页面，加载中的 GIF 将不会显示。

这可以使用 JavaScript 或 jQuery 吗？我在 Stack Overflow 上尝试了其他解决方案，但没有成功。

Answer 1

我将从 iframes 开始，其中 src 是空的，然后将目标存储在另一个属性

中

<div class="holder">
    <div class="gif-hidden"></div>
    <iframe class="myframe" src="" attr-link="https://google.com/" attr-first="true"></iframe>
</div>

然后当页面加载成功时，启动动画并设置src值

.gif-hidden 应该有 display:none 或 opacity:0 属性，而 .gif 是可见的。

$('.gif-hidden').removeClass('gif-hidden').addClass('gif');
$('.myframe').attr('src',$('.myframe').attr('attr-link'));

还添加一个事件侦听器以在 iframe 首次加载后禁用动画

$('.myframe').load(function(){
     if($(this).attr('attr-first') == "true")
     {
         $(this).attr('attr-first','false');
         $(this).prev().hide();
     }
}

未测试，但应该可以。

Answer 2

如果您的框架始终与父框架位于同一域中 window，您可以在 iframe contentWindow 上注册 onbeforeunload 事件处理程序以检测导航离开。

示例：

var iframe = // create or get iframe, make sure no src parameter at first
var unload = function(){
    // show loading gif here
};

var load = function(){
    // hide loading gif here

    iframe.contentWindow.onbeforeunload = unload;
    iframe.onload = load;
};

unload();
iframe.onload = load;
iframe.src = "your url here";

Fiddle: http://jsfiddle.net/qnausxac/1/

注意：不要在 iframe 中使用类似

的方式注册 onbeforeunload 事件

window.onbeforeunload = function(){/* ... */} // BAD

这将覆盖您的父事件处理程序。如果您需要检测 iframe 中的事件，请与父级设置某种回调。

每次 iframe 加载页面时显示加载 gif

Show loading gif every time iframe loads a page

html

javascript

css

jquery

frontend