So verhindern Sie die Größenänderung und Maximierung des Javascript-Fensters

Lesezeit: 4 Minuten

Benutzer-Avatar
David

Wie verhindere ich die Größenänderung und Maximierung des Javascript-Fensters?

Ich verwende folgenden 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");

Habe mehrere Lösungen von Stackoverflow ausprobiert, hatte aber kein Glück. Kann mir jemand helfen?

  • Sie können nicht, und Sie absolut sollte nicht. Wenn Sie ein modales Popup mit fester Größe rendern möchten, verwenden Sie a <dialog> mit welchen Abmessungen Sie wählen, Innerhalb deine Seite. Wenn Sie die Kontrolle über die gesamte Anzeige Ihres Benutzers haben möchten, fordern Sie von ihm Vollbildberechtigungen an.

    – Bergi

    1. Juni 2021 um 0:09 Uhr


  • Warum nicht mit a <dialog> mit einem <iframe> Innerhalb? Was hindert Sie daran, dieses Setup zu verwenden?

    – Dima Parzhitsky

    3. Juni 2021 um 22:47 Uhr

Benutzer-Avatar
Spektr

Es ist durchaus möglich

… wenn auch eingeschränkt

Durch das Hören auf die Fenster resize Ereignis und die Verwendung der Window.resizeTo() Funktion ist es möglich, die Größenänderung des Fensters zu verhindern.

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

Dies ist keine Cross-Origin-Lösung – Sie können keine Ereignis-Listener usw. hinzufügen. auf einem Fenster mit einem anderen Ursprung, da es für böswillige Zwecke verwendet werden kann.

Ergebnis:

UnresizableWindow-NonCrossOriginEdition-SpectricSO

[Try it yourself]


Unterstützung unterschiedlicher Herkunft

Die folgende Lösung erstellt ein neues Fenster mit der aktuellen URL und überschreibt dann das Dokument mit einer <iframe> enthält die Quelle der gewünschten Site.

Warum öffnen wir zuerst mit der aktuellen URL? So können wir das DOM manipulieren, ohne uns über diese “Blocked a frame with origin “…” from accessing a cross-origin frame”-Fehler zu ärgern, und auch damit wir den Resize-Event-Listener an das Fenster anhängen können (nicht möglich mit die ursprüngliche Lösung).

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

Ergebnis:

UnresizableWindow-CrossOriginEdition-SpectricSO

[Try it yourself]

Was auf den meisten Websites funktioniert. Aber Sie werden hin und wieder auf die Meldung „ weigerte sich, eine Verbindung herzustellen“ stoßen.

Wenn Sie wissen möchten, warum, lesen Sie: iframe weigert sich anzuzeigen


Um die Maximierung des Fensters zu verhindern, scheint es keine Möglichkeit zu geben, es programmgesteuert zu minimieren beachten Sie das resize -Ereignis wird während der Maximierung ausgelöst. Window.minimize() sieht vielversprechend aus, aber bis jetzt gibt es keine Unterstützung dafür in jedem Browser.

  • Funktioniert nicht. Nichts hindert mich daran, die Größe meiner Browserfenster nach Belieben zu ändern.

    – Bergi

    1. Juni 2021 um 0:11 Uhr

  • @Bergi Die Methode sollte funktionieren, wenn sich die Site in derselben Domäne befindet.

    – Spektr

    1. Juni 2021 um 1:08 Uhr

  • Sie können dies auch von der geöffneten Seite selbst aufrufen, ohne dass ein Zugriff auf dieselbe Domäne erforderlich ist.

    – Kaiido

    1. Juni 2021 um 1:17 Uhr

  • Sie fragen sich vielleicht: WARUM muss ich das tun? Zwingen Sie dies Ihren Benutzern nicht auf.

    – digitaler Esel

    1. Juni 2021 um 8:19 Uhr

  • @Spectric dies funktioniert nicht beim Maximieren des Zeitfensters.

    – David

    2. Juni 2021 um 11:22 Uhr

Sie können im Allgemeinen nicht. Das ist eine Funktion, die von der Browserkonfiguration gesteuert wird:

Windows.open() MDN-FAQ:

Wie deaktiviere ich die Größenänderung von Fenstern oder entferne Symbolleisten?

Das kannst du nicht erzwingen. Benutzer mit Mozilla-basierten Browsern haben über Benutzereinstellungen in about:config absolute Kontrolle über Fensterfunktionen wie Größenänderung, Bildlauf und Symbolleistenpräsenz. Da Ihre Benutzer diejenigen sind, die solche Fenster verwenden sollen (und nicht Sie als Webautor), ist es das Beste, zu vermeiden, ihre Gewohnheiten und Vorlieben zu beeinträchtigen. Wir empfehlen, die Größenänderung und das Vorhandensein von Bildlaufleisten (falls erforderlich) immer auf Ja zu setzen, um die Zugänglichkeit zu Inhalten und die Benutzerfreundlichkeit von Fenstern sicherzustellen. Dies ist im besten Interesse sowohl des Webautors als auch der Benutzer.

Dasselbe gilt für Google Chrome.

  • Haben wir ein Workaround-Beispiel, um dies zu beheben?

    – David

    26. Mai 2021 um 4:22 Uhr

  • Wie in dieser Antwort erwähnt codepen.io/aleksxor/pen/ZEevJgK Ich denke, das ist das Naheliegendste, was man bekommen kann. Obwohl es die meiste Zeit sehr hässlich aussieht. Berücksichtigen Sie auch die Tatsache, dass viele Sites strenge CSP-Regeln gegen unbekannte/Blob/etc Frame-Vorfahren haben.

    – aleksxor

    1. Juni 2021 um 7:01 Uhr


  • … und es waren schlimme Zeiten, als man so was noch machen konnte 😉

    – digitaler Esel

    1. Juni 2021 um 8:16 Uhr


1013750cookie-checkSo verhindern Sie die Größenänderung und Maximierung des Javascript-Fensters

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy