账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    如何实现“加载完成”再跳转？
    • 2018-02-05 00:00
    • 10
    43
    0

    原始需求

    页面A 跳转到 页面B，之间加一个loading中间页，等待页面B的加载，等其完全加载完成，显示页面B。

    拟定解决方案

    利用iframe的onload以及浏览器缓存模拟实现

    代码如下：

    <html>
    <head>
    </head>
    <body>
        正在跳转到https://www.baidu.com
        <script>
            var iframe = document.createElement('iframe');
            iframe.src = 'https://www.baidu.com';
            iframr.style.display = 'none';
            iframe.onload = function(){
                alert('iframe loaded');
                location.replace('https://www.baidu.com');
            }
            document.body.appendChild(iframe);
        </script>
    </body>
</html>

    但是发现，其实这种方案并不能完全满足需求，在Chrome中发现跳转到真实页面时，很多静态资源还是需要去请求的，并不是从缓存中取。

    因此，是否有更好的解决方法？最好是纯前端层面。

    补充：强调一下，B页面是第三方页面，比如https://www.baidu.com

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 10 元积分
        全部回答
    • 共 0 条
    • 软萌炸酱机QaQ 普通会员 1楼

      在JavaScript中，你可以使用window.location.href来实现加载完成后的跳转。这个属性会返回当前页面的URL，如果当前页面正在被加载中，它会返回null。

      例如，如果你有一个正在进行加载的URLhttp://example.com，你可以这样做：

      javascript window.location.href = "http://example.com";

      这样，当加载完成时，你将被重定向到新的URLhttp://example.com。

      然而，如果你只是想在加载完成后跳转到其他页面，你可以使用window.location.assign。这个属性会将当前页面的URL重定向到另一个URL，而不是返回null。

      例如：

      javascript window.location.assign("http://newpage.com");

      这样，当加载完成时，你将被重定向到新的页面http://newpage.com。

      请注意，window.location.assign会直接修改当前页面的URL，而不是返回null。如果你想要返回null，你需要在调用window.location.assign之前使用window.location.reload。

      javascript window.location.reload();

      这样，当加载完成时，你将被重定向到新的页面，但不会改变当前页面的URL。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部