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

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

---

这是否可以使用JavaScript或jQuery实现？我在堆栈溢出问题上尝试了其他解决方案，但没有成功。

我将从

iFrame

开始，它具有空的

src

，并将目标存储在另一个属性中

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

还添加一个事件侦听器，以便在第一次加载

iframe

时禁用动画

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

---

未测试，但应能正常工作。

如果您的帧始终与父窗口位于同一域中，则可以在iframe

contentWindow

上注册

onbeforeuload

事件处理程序，以检测是否导航离开

例如：

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

小提琴：

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

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

---

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

难以理解您的问题。“当用户离开iframe中的页面时”是什么意思？哦，人们会问你“你做了什么”或者可能的“告诉我们你做了什么”？“当用户导航离开iframe中的页面时”也就是当用户点击离开iframe的默认页面时。我尝试的是针对类似问题的堆栈溢出解决方案。例如：我不认为每次加载iframe中的页面时都会显示此内容，是吗？您要求的解决方案仅在第一次加载时显示动画。“一旦用户在iframe中导航离开该页面，加载的GIF将不会显示。”不，我的意思是，当尝试使用其他解决方案时，加载的GIF将不会显示。我想让它出现。

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