Menu
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?
463
... 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.com", "_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]
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.com";
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 come 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.
190
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 recommend 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.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
