onClick 在运行我的功能之前加载新页面答案

【问题标题】：onClick loading new page before running my functiononClick 在运行我的功能之前加载新页面
【发布时间】：2015-02-16 00:09:55
【问题描述】：

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

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

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

这是链接的代码：

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

注意 - 跨度允许该链接所在的整个 div 可点击。

这是函数的代码：

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

如果我将返回设置为“false”，它确实会将容器显示设置为无。不幸的是，当设置为 false 时，它显然没有遵循我的链接。

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

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

【问题讨论】：

标签： javascript html css safari

【解决方案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);
}

【讨论】：

我试了一下 - 但没有运气。它在隐藏我的容器之前继续跟踪链接。

【解决方案2】：

一旦您开始导航到下一页，Safari 似乎会停止对该页面进行更新。您可以尝试使用超时，以便浏览器在足够长的时间内获取控件以进行更新，然后导航到新页面。

在调用中发送 href：

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

在函数中返回false，并设置一个超时时间来进行导航：

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

【讨论】：