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

user_1150527 0
Viewed 1382

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
  );
});
window.open html javascript
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.

user_122325090
Related