Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Window.open ignoring height and width when noopener is included in the option

I've been trying to specify the width and height of a popup window via window.open function. However, as soon as I include noopener in the option the width and height are ignored on Chrome.

Here's the code I'm using, https://jsfiddle.net/v0otu1kq/ in this case the window opens with specified dimensions.

However, once I include noopener in the option e.g. https://jsfiddle.net/1eqtLsnr/ it ignores the dimension set.

document.querySelector('[data-frame]').addEventListener('click', function(e) {
  e.preventDefault();
  window.open(
    'https://facebook.com',
    'facebook-window',
    'width=600,height=400,scrollbar=yes,noopener' // <-- this
  );
});
like image 953
JohnnyQ Avatar asked Oct 22 '19 00:10

JohnnyQ


People also ask

Which of the following methods in Javascript can be used to open a blank window named example with default features?

The open() method opens a new browser window, or a new tab, depending on your browser settings and the parameter values.

Is window open synchronous?

Using Chrome's window. Native window. open() allows synchronous access to opened windows so it is convenient choice if you need to open a dialog or a preferences window.

What does window open return?

When window.open() returns, the window always contains about:blank . The actual fetching of the URL is deferred and starts after the current script block finishes executing. The window creation and the loading of the referenced resource are done asynchronously.

How do I open a pop up window?

The syntax to open a popup is: window. open(url, name, params) : url. An URL to load into the new window.


1 Answers

I took a deeper look into the documentation of the window.open function, and i finally found a workaround:

let fbWindow = window.open(
    '',
    'facebook-window',
    'width=600,height=400,scrollbar=yes'
);

fbWindow.opener = null;
fbWindow.location = 'https://facebook.com';

This works as follow:

  1. We create a popup window with desired properties and blank URL
  2. Programatically, we change the property opener of the created popup window to null
  3. After everything is done, we change the location of the window to the desired one (if we did this before, we would come across a cross-origin error)

PS: Notice that this won't work on JSFiddle, since it is sandboxed.

like image 181
Matheus Gomes Avatar answered Sep 26 '22 20:09

Matheus Gomes