如何实现“加载完成”再跳转？

原始需求

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

html javascript

阅读 8.3k

3 个回答

得票最新