onClick 在 运行 我的函数之前加载新页面

Question

当用户点击我的 link 时，我想要一个 Javascript 函数来 运行 隐藏我页面上的所有内容，完成后，按照 link.我的以下代码在 Chrome 中有效，但在 Safari 中无效。

问题是 Safari 在 "hides" 我的页面之前跟随 link。当我说 "hide" 我的页面时，我实际做的是将页面的容器 div 设置为 "display:none";

（您可能会问为什么我想在 link 单击时隐藏我的页面 - 这是因为我 运行 在一个小型 Arduino 服务器上安装这个网站，这需要几个新页面加载前几秒。因此，我的目标是 "hide" 单击 link 后当前页面上的所有内容以模拟更快的加载。）

这是 link 的代码：

<a href="add.htm" onclick="return clearScreen();"><span class="clickableDiv"></span>ADD DEVICE</a> 

注意 - 跨度允许整个 div，其中 link 位于其中，可以点击。

函数代码如下：

function clearScreen(){
  document.getElementById("container").style.display = 'none';
  return true;
}

如果我将 return 设置为 "false"，它会有效地将容器显示设置为 none。不幸的是，当设置为false时，它显然不遵循我的link。

我也试过使用 window.location.href = "add.htm";在我的展示之后 = 'none'; - 但没有运气。

再一次，这在 Chrome 中完美运行，但在 Safari 中却不行。

Answer 1

试试这个：

<a href="add.htm" onclick="clearScreen(this,event);"><span class="clickableDiv"></span>ADD DEVICE</a>

function clearScreen(link, event){
    event.preventDefault();
    document.getElementById("container").style.display = 'none';
    setTimeout(function(){
        window.location = link.href;
    }, 0);
}

Answer 2

一旦您开始导航到下一页，Safari 似乎就会停止更新页面。您可以尝试使用超时，以便浏览器重新获得足够长的时间来进行更新，然后导航到新页面。

在通话中发送 href：

<a href="add.htm" onclick="return clearScreen(this.href);">

在 return false 的函数中，设置导航超时：

function clearScreen(href){
  document.getElementById("container").style.display = 'none';
  window.setTimeout(function(){
    window.location.href = href;
  }, 0);
  return false;
}