CODEWITHSUNDEEP
javascripthtmlwindow.open
JohnnyQ
JohnnyQ

Reputation: 5119

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
  );
});

Upvotes: 6

Views: 2279

Answers (1)

Matheus Gomes
Matheus Gomes

Reputation: 434

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.

Upvotes: 3

Related Questions