Question

我有一个响应性的Web应用程序，我希望用户能够单击电话号码来拨打它。

此外，我想在页面加载过程中显示"Please wait while loading..."。

要让"Please wait while loading..."在页面加载时显示，我具有以下javascript代码

$(function () {

  // #Waiting is visible by default, when the page finish loading, hide the loading
  $("#Waiting").fadeOut(500);

    window.onbeforeunload = function () {
      // When a user navigates away, show the loading
      $("#Waiting").fadeIn(500);
    };
});

从上面的代码中，您会注意到默认情况下“加载”页面是可见的。页面加载完成后，我将其淡出。另外，在页面卸载时，我将显示“正在加载”页面，直到重定向用户为止。

以上代码在用户单击“单击通话”按钮之前一直有效。当前，当用户单击“点击通话”按钮时，“正在加载”页面就会显示，并且永远不会消失。

由于“点击通话”实际上并未使用户离开页面，因此我想防止触发onbeforeunload事件，从而阻止显示“正在加载”页面！

这是我的HTML标记

<body>

     <div id="Waiting">Please wait while loading...</div>

     <a href="tel:+1-800-123-4567" class="btn btn-lg btn-danger btn-block click-to-call">
         <strong>Call Now</strong>
     </a>

</body>

如何点击点击通话按钮时阻止onbeforeunload触发？

Answer 1

您似乎可以访问导致onbeforeunload从event.target.activeElement触发的元素

您应该可以将onbeforeunload处理程序修改为以下内容。

window.onbeforeunload = function (event) {

    if (event && event.target && event.target.activeElement && event.target.activeElement.tagName.toLowerCase() === 'a' && event.target.activeElement.href.indexOf('tel:') > -1) {

        return;
    }

    // When a user navigates away, show the loading
    $("#Waiting").fadeIn(500);
};

上面的代码评估活动元素。如果活动元素是带有包含href的{{1}}的链接，则我们不执行任何操作或不显示tel:元素。

Answer 2

这就是我用来实现该功能的方法。只有在单击例外元素（在您的情况下，此电话链接）时，我才更改有效值。

var valid = false;
window.onbeforeunload = function() {
    return valid?undefined:"";
};

如何防止单击电话号码时触发“ onbeforeunload”？

2 个答案: