How do I prevent resizing and maximizing of the Javascript window?
I am using the following code:
var win = window.open(myURL, "_blank", "toolbar=no,menubar=no,scrollbars=yes,dialog=yes,resizable=no,top=100,left=250,width=800,height=530");
Have tried multiple solutions from Stackoverflow but had no luck. Can anybody help me?
How do I prevent resizing and maximizing of the Javascript window?
I am using the following code:
var win = window.open(myURL, "_blank", "toolbar=no,menubar=no,scrollbars=yes,dialog=yes,resizable=no,top=100,left=250,width=800,height=530");
Have tried multiple solutions from Stackoverflow but had no luck. Can anybody help me?
Share Improve this question edited Jun 1, 2021 at 7:51 biberman 5,7674 gold badges14 silver badges38 bronze badges asked May 25, 2021 at 11:46 DavidDavid 4,28111 gold badges41 silver badges89 bronze badges 2-
3
You cannot, and you absolutely should not. If you want to render a modal popup of fixed size, use a
<dialog>with whatever dimensions you choose, inside your page. If you want control over your user's whole display, request fullscreen permissions from them. – Bergi Commented Jun 1, 2021 at 0:09 -
1
Why not using a
<dialog>with an<iframe>inside? What stops you from using this setup? – Parzh from Ukraine Commented Jun 3, 2021 at 22:47
2 Answers
Reset to default 21 +50It is pletely possible
... albeit limited
By listening for the window resize event and using the Window.resizeTo() function, it is possible to prevent the window from resizing.
var x = window.open("https://www.stackoverflow.", "_blank", "toolbar=no,menubar=no,scrollbars=yes,dialog=yes,resizable=no,top=100,left=250,width=800,height=530");
x.addEventListener("resize", () => {
x.resizeTo(800, 530);
})
This is not a cross-origin solution - you cannot add event listeners etc,. on a window with a different origin as it can be used for malicious purposes.
Result:
[Try it yourself]
Supporting different-origin
The following solution creates a new window using the current URL, then overwrites the document with an <iframe> containing the source of the desired site.
why do we first open using the current URL? So we can manipulate the DOM without being annoyed with these "Blocked a frame with origin "..." from accessing a cross-origin frame" errors, and also so that we can attach the resize event listener to the window (not possible with the original solution).
var goto = "https://wix.";
var x = window.open(location, "_blank", "toolbar=no,menubar=no,scrollbars=yes,dialog=yes,resizable=no,top=100,left=250,width=800,height=530");
x.document.write(`<html><head><style>body{margin:0;overflow:hidden;}iframe{width:100%;height:100%;border:0}</style></head><body><iframe src="${goto}"></iframe></body></html>`);
x.addEventListener("resize", () => {
x.resizeTo(800, 530);
})
Result:
[Try it yourself]
Which works on most sites. But you'll e across a "<sitename> refused to connect" once in a while.
If you want to know why, check out: iframe refuses to display
As for preventing maximization of the window, there does not seem to be any way to minimize it programmatically note: the resize event is fired during maximization. Window.minimize() looks promising, but as of yet there is no support for it across any browser.
You can not, in general. That's a feature controlled by browser configuration:
Windows.open() MDN FAQ:
How do I turn off window resizability or remove toolbars?
You cannot force this. Users with Mozilla-based browsers have absolute control over window functionalities like resizability, scrollability and toolbars presence via user preferences in about:config. Since your users are the ones who are supposed to use such windows (and not you, being the web author), the best is to avoid interfering with their habits and preferences. We remend to always set the resizability and scrollbars presence (if needed) to yes to insure accessibility to content and usability of windows. This is in the best interests of both the web author and the users.
The same goes for Google Chrome.