如何在javascript onbeforeunload事件中获取网页上链接的目标网址？ [英] How can i get the destination url of a link on the web page in the javascript onbeforeunload event?

问题描述

是否可以捕获用户点击的网页上的链接？
不是在谈论他们是否在地址栏中手动输入了网址，或者是否点击了后退按钮 - 而是当前页面上的现有链接或菜单项。

Is it possible to capture what link on the web page the user clicked on? Not talking about if they manually entered an url in the address bar or if they clicked on the back button - but an existing link or menu item on the current page.

这适用于具有标准标题和标题的商业网页。页脚包含指向公司网站上其他页面的链接。

This is for a commercial web page that has a standard header & footer containing links to other pages on the company's web site.

他们有一个复杂的订单表单，尝试保存&恢复表单状态。

如果在填写订单的过程中，客户需要访问网站上的另一个页面 - 查看产品等。理想情况下，我可以提供选项在另一个浏览器窗口或标签中打开链接而不是离开页面，这样用户就不会丢失他们放入订单的工作。

They have a complicated order form where it's not practical to try saving & restoring the state of the form.
If in the process of filling out an order the customer needs to visit another page on the web site - to review product, etc.. Ideally I would be able offer the option of opening the link in another browser window or tab instead of leaving the page so that the user doesn't loose the work they've put into the order.

我知道我可以有一套不同的标题&写入的页脚是为了在另一个窗口/选项卡中打开它们的链接，但是为了简化维护和更新我正在尝试尽量减少使用的变体数量。此外，用户可能想要放弃订单，如果试图这样做而另一个窗口打开则可能会感到困惑。

I know that I could have a different set of headers & footers that are written to open their links in another window/tab but to simplify maintenance & updating I'm trying to minimize the number of variations used. Also it is possible that the user wants to abandon the order form and may get confused if in trying to do so that another window opens instead.

我正在使用JQuery& Javascript。

I am using JQuery & Javascript.

推荐答案

这就是我想出来处理这个问题，它对我有用。

检测用户何时单击页面链接，然后评估链接以确定如何正确处理。 它不适用于在浏览器地址栏中输入的链接。

This is what I came up with to handle this and it is working for me.
Detects when user clicks on a page link then evaluates link to determine how to handle appropriately. It does not work for links typed in the browser address bar.

我使用jquery magnific-popup（ http://dimsemenov.com/plugins/magnific-popup/ ）在我的代码中创建一个弹出窗口（.popupForm-handleExitRequest） ），为用户提供在同一窗口中打开链接（并丢失其订单数据）的选项，在新窗口中或返回订单表单。

I use jquery magnific-popup (http://dimsemenov.com/plugins/magnific-popup/) to create a popup window (.popupForm-handleExitRequest in my code) that offers the user the option of opening link in same window (and losing their order data), in new window or returning to order form.

$('body a').click(function(e) {     
    //if link is reference to page element
    if ($(this).attr('href').charAt(0)=="#") {
        return;
    }

     //check if link is to same window    
     var pathname = window.location.pathname;
     var pathname2 = $(this).attr('href');
     pathname2 = pathname2.replace(/^.+\.\//, '');
     if (pathname.indexOf(pathname2) >= 0) {
        //link clicked is contained on same page
        //prevent page from getting reloaded & losing data
        e.preventDefault();
        e.stopImmediatePropagation();
        e.stopPropagation();    
        return;     
    }

    //link clicked on is another page
    if (hasMerchandise) {  //var to indicate user has items on order form       
        //give user options: leave page, open link in other page, stay, etc.
        // $('.popupForm-handleExitRequest').click();   //roll your own code    

        //prevent page from getting reloaded & losing data
        //in case user wants to cancel page change or open link in another window
        e.preventDefault();
        e.stopImmediatePropagation();
        e.stopPropagation();            
    } else {
        //load new page
        $(this).removeAttr('target');
    }       
});

这篇关于如何在javascript onbeforeunload事件中获取网页上链接的目标网址？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！