有没有一种方法可以在重定向到空白窗口以等待使用JavaScript加载之前，在同一个域下加载整个URL？

如何解决有没有一种方法可以在重定向到空白窗口以等待使用JavaScript加载之前，在同一个域下加载整个URL？

说我有两页：

index.html和detail-product.html作为索引页面和产品详细信息页面。

在索引页面中，我有一个指向产品页面的链接：

<a target="_self" href="detail-product.html">Product Details</a>

如果用户单击链接，则浏览器将在加载产品页面时打开空白页面。

我想使这种体验更加顺畅。是否有可能做一些事情来使索引页挂起并等待直到产品页加载，然后以非常快的速度打开它。

例如，我会做这样的事情：

$('a').click(function(){
  var targetLink = $(this).attr('href');
  var loadSuccessCallback = function(){
    window.href = targetLink;
  }
  holdLoading(loadSuccessCallback);
})
function holadLoading(cb) {
  // do the loading thing
  // .....
  // if the page is loaded,then call "cb".
}

解决方法

是的，如果链接位于同一服务器（不是本地文件系统）上，则可以使用fetch获取其内容，将其存储到变量中，然后将整个页面的HTML设置为fetch的内容。唯一的问题是两个页面的URL都相同，因此您可以在URL的末尾添加#otherPage，并创建一个JavaScript函数来自动读取location.hash加载页面时供以后使用

所以抓取是

fetch（“ detail-product.html”） .then（r => r.text（）） .then（r => {location.hash =“ details”; document.getElementsByTagName（“ html”）[0] .innerHTML = r}）

或者您可以使用文本内容创建一个新的Blob，然后使用该Blob的对象URL打开一个新标签页

或使用blob URL在主页上创建一个新的iframe，并在按下按钮时设置主窗口的位置哈希，然后在页面加载时读取哈希，根据哈希进行获取，然后设置iframe src到加载后获取的文本的Blob URL

,

您的问题已经回答，所以我将写一个替代方案...

我认为您应该让浏览器在完成当前页面的加载后预加载其他页面的内容，因为您想要的用户体验听起来很流畅，但可能会使用户感到困惑，因为一段时间后想知道为什么他们点击的所谓链接不会带他们到任何地方。它还有SEO问题。

在性能方面，最好的方法是使用prerender：

<link rel="prerender" href="https://example.com/content/to/prerender">

https://developer.mozilla.org/en-US/docs/Glossary/prerender

https://caniuse.com/#feat=link-rel-prerender

...但是，如果您关心浏览器的兼容性，则可以使用预取

<link rel="prefetch" href="https://www.example.com/solutions" />

https://developer.mozilla.org/en-US/docs/Glossary/Prefetch

https://caniuse.com/#feat=link-rel-prefetch