Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using rel="noopener" in window.open()

So I know that I can apply rel="noopener in an a tag when using target="_blank". But I'm trying to pass it as an argument to window.open(), ie:

window.open('http://cats.com', '_blank', 'rel=noopener')

however it doesn't seem to be working the way that I expected, as the opener object still exists on the window after the user clicks on the link.

Is there something I'm missing? Or cannot it not be done the way that I'm intending?

I've found some great articles but they don't quite address my use case as far as I can tell.

https://developer.mozilla.org/en-US/docs/Web/API/Window/open https://mathiasbynens.github.io/rel-noopener/

Much appreciated.

like image 706
Bryantee Avatar asked Sep 11 '17 03:09

Bryantee


People also ask

How do I get a return value from a Windows Open?

Typically the onclick event on the "Yes" or "Ok" button in the modal dialog looks like this: window. returnValue = true; window. close();

Is window open Noopener Noreferrer?

That's where noopener and noreferrer come in. The values noopener and noreferrer belong to the rel attribute, and they tell the browser NOT to set the window. open property when opening a link in a new tab/window.

How do I make a link open in a new window?

Open in a new window To open a link in a new browser window, hold the Shift on then click the link or right-click the link and select Open link in New Window.


2 Answers

There is no direct example in doc but it can be used like this and it worked for me.

window.open('http://cats.com', '_blank', 'noopener,resizable,scrollbars')
like image 171
Nauman Rafique Avatar answered Sep 17 '22 06:09

Nauman Rafique


Cover all your bases

The safest way to redirect is by adding noopener, noreferrer, and window.opener = null.

const openInNewTab = (url) => {
    const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
    if (newWindow) newWindow.opener = null
}

Then call your new funtion

openInNewTab('https://stackoverflow.com')

The third param can also take these optional values, based on your needs.

like image 29
Gibolt Avatar answered Sep 18 '22 06:09

Gibolt