如何在新的浏览器选项卡中检测URL更改并取回URL？

Question

I have a link that will open a url in a new tab like this:

<a href="#" target="teamViewer" style="color: deepskyblue"><span data-bind="text: connectorLoginLink, visible: shouldShowConnectorLoginLink, click: openTeamViewerUrl"></span></a>

As I want to detect the URL change in the new tab, I thought I had to use window.open(url) to open this link. Then, keep track of the new window.

In viewmodel:

public openTeamViewerUrl() {
    var newWindow = window.open('http://www.google.com', '_blank', 'location=yes');
}

I want to set the opened tab to a newWindow object, then monitor it by using something like this:

var currentPage = newWindow.location.href;

    setInterval(function () {
        console.log(currentPage);
        if (currentPage !== newWindow.location.href) {
            // page has changed, set new page as 'current'
            currentPage = newWindow.location.href;

            console.log(currentPage);
            // do other thing...
        }
    }, 1000);

I got the error back when trying window.open: Blocked opening ' http://www.google.com/ ' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.

Really got stuck on this. How to by pass the allow-popups? Can this feature be achieved using other methods?

Answer 1

To detect a change of URL you can use javascript unload event on the window , see https://developer.mozilla.org/en-US/docs/Web/Events/unload

window.addEventListener('unload', function(event) {
    console.log('Navigation occuring');
});