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

Question

当用户点击我的链接时，我希望运行一个 Javascript 函数来隐藏我页面上的所有内容，一旦完成，就点击该链接。我的以下代码在 Chrome 中有效，但在 Safari 中无效。

问题是 Safari 在“隐藏”我的页面之前跟踪链接。当我说“隐藏”我的页面时，我实际上是在将页面的容器 div 设置为“display:none”；

(您可能会问为什么我想在链接点击时隐藏我的页面 - 这是因为我在一个小型 Arduino 服务器上运行这个网站并且在新页面加载之前需要几秒钟。所以，我的目标是在您单击链接后“隐藏”当前页面上的所有内容以模拟更快的加载。)

链接代码如下:

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

注意 - span 允许点击此链接所在的整个 div。

函数代码如下:

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

如果我将 return 设置为“false”，它会有效地将容器显示设置为无。不幸的是，当设置为 false 时，它​​显然不会跟随我的链接。

我也试过使用 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);
}