Question

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

这可以使用JavaScript或jQuery吗？我在Stack Overflow上尝试了其他解决方案而没有运气。

Answer 1

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

示例：

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

小提琴：http://jsfiddle.net/qnausxac/1/

注意：请勿使用

之类的内容在iframe中注册onbeforeunload事件

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

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

Answer 2

我会从\$\w+开始，它有空(?!^)\G并将目标存储在另一个属性中

history.replaceState(null,null, window.location.pathname + "your thing here")

然后成功加载页面时，启动动画并设置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

没有经过测试，但应该可以使用。

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

2 个答案: