我不理解的 2 个不同函数之间的 Javascript 行为

Question

我是一名 Java 开发人员，不精通前端技术，所以我希望这个问题不要太愚蠢。我在一个 html 页面上有 2 个内联脚本。

<script type="text/javascript">
        function printReceipt(orderId,email) {
            var printWindowSettings;
            var browserUserAgent = navigator.userAgent;

            if (browserUserAgent.indexOf("Chrome") > -1) {
                printWindowSettings = "status=0,toolbar=0,menubar=0,height=500,width=1000,scrollbars=1";
            } else {
                printWindowSettings = "status=0,toolbar=0,location=0,menubar=0,height=500,width=1000,scrollbars=1,noopener=1";
            }

            var path = "/shop/printReceipt?orderid="+orderId;
            if (email!=null)
                path+="&email=" + email; 
            var docPrint = window.open(path, '_blank', printWindowSettings);
            if (docPrint == null) console.log("window open returned null");
        }
    </script>

    <script type="text/javascript">
        bajb_backdetect.OnBack = function()
        {
            window.history.back=function(){
              console.log("Back Button Pressed.")
              document.location='/shop/shoppingCart.seam';
            }
        }
    </script>

printReceipt() 在锚标记的onClick() 处理程序中调用。

<div class="pull-left" style="padding-bottom:20px;"><a href="#" onclick="javascript:printReceipt(apaOrder.orderId);" class="btn btn-primary-custom"><i class="fa fa-print" aria-hidden="true" style="padding-right:6px;"></i>Print Receipt</a></div>

我发现当printReceipt() 被调用时，以下脚本（用于管理后退按钮）也会被调用。所以当printReceipt()被调用时，我的浏览器会导航到/shop/shoppingCart.seam。

为什么会这样？我该如何解决这个问题？

Answer 1

我对您的问题进行了一些研究，由于您提到您使用的是第三方脚本（这对开发人员来说并不总是最好的），我发现了一些可以帮助您摆脱它的方法。

此方法需要您删除已有的第三方脚本（或对其进行评论）。因为我们将以不同的方式处理后退按钮。

在 script 标记中，您有以下代码：

bajb_backdetect.OnBack = function() {
    window.history.back = function() {
        console.log("Back Button Pressed.")
        document.location = '/shop/shoppingCart.seam';
    }
}

用以下代码替换它：

(function(window, location) {
history.replaceState(null, document.title, location.pathname+"#!/history");
history.pushState(null, document.title, location.pathname);

window.addEventListener("popstate", function() {
  if(location.hash === "#!/history") {
    history.replaceState(null, document.title, location.pathname);
    setTimeout(function(){
      location.replace("/shop/shoppingCart.seam"); //Here goes your URL 
    },0);
  }
}, false);
}(window, location));

现在，如果您确实删除了第三方脚本（或对其进行了评论），您应该能够看到预期的行为。

如果您想了解有关此的更多信息，已经回答了一个与此类似的问题，说处理窗口返回事件的最佳方法是自己完成。

我从this answer 获取了这些信息，只是用针对您的具体问题的解释和代码对其进行了补充。希望对您有所帮助。

注意：如果它仍然无法正常工作，您需要提供更开放的代码上下文，因为可能有其他原因导致它无法正常工作。

Answer 2

可能单击的锚点会导致浏览器跟随链接。

鉴于此：

<a href="" onclick="printReceipt(10, 'person@site.com')">click me</a>

单击该链接将运行该功能，然后页面将重新加载。您的背部检测脚本会注意到页面正在被卸载并做一些事情（显然）。

改成：

<a href="" onclick="printReceipt(10, 'person@site.com'); return false">click me</a>

为了防止链接被跟踪。