Fensterstandort
【1】 Holen Sie sich
Der Browser (Firefox unterstützt es nicht) liefert screenLeft und screenTop -Eigenschaften, die zur Darstellung der Position des Fensters relativ zur linken bzw. Oberseite des Bildschirms verwendet werden.
Wenn das Fenster maximiert wird, sind die von jedem Browser zurückgegebenen Werte beim Ausführen des folgenden Codes nicht gleich. Chrome kehrt nach links zurück: 0; oben: 0. IE kehrt nach links zurück: 0; oben: 56 (Wenn es eine Menüleiste gibt, kehrt sie nach links zurück: 0; oben: 78), da der IE den Abstand von der linken und oberen Seite des Bildschirms zum sichtbaren Bereich der Seite spart, die vom Fensterobjekt dargestellt wird. Safari kehrt links zurück: -8; Top: -8 aufgrund seines eigenen Fehlers
// Bewegen Sie das Fenster, es wird eine Änderung des Wertes <div id = 'mydiv'> </div> <script> var timer = setInterval (function () {mydiv.innnerHtml = 'links:' + Fenster.Screenleft + '; obere:' + Fenster.Ergebnis: links: 0; oben: 93
screenX und screenY Eigenschaften (IE8-) enthalten auch die gleichen Fensterpositionsinformationen.
[Hinweis] screenLeft , screenTop , screenX und screenY sind alle schreibgeschützte Eigenschaften. Durch das Ändern ihrer Werte wird das Fenster nicht bewegt.
Wenn das Fenster maximiert wird, sind die von jedem Browser zurückgegebenen Werte immer noch unterschiedlich. Firefox kehrt nach links zurück: -7; oben: -7. Chrome kehrt immer noch links zurück: 0; oben: 0. IE9+ kehrt immer links zurück: -7; oben: -7 unabhängig davon, ob die Menüleiste angezeigt wird oder nicht. Safari kehrt immer noch links zurück: -8; top: -8 aufgrund seines eigenen Fehlers
<div id = 'mydiv'> </div> <script> var timer = setInterval (function () {mydiv.innnerHtml = 'links:' + window.screenx + '; top:' + window.screeny;}) mydiv.onclick = function () {clearInterval (Timer);} </script> </script> </script> </script>;Ergebnis: links: 0; oben: 93
kompatibel
Die kompatible Schreibmethode zum Erhalten der Fensterposition ist wie folgt
[Anmerkung] Aufgrund der verschiedenen Implementierungen jedes Browsers ist es unmöglich, den genauen Koordinatenwert unter kreuzbrowserbedingten Bedingungen zu erhalten.
var Leftpos = (Typeof Fenster.Screenleft == "Nummer")? window.screenleft: window.screenx; var toppos = (typeof fenster.screentop == "number")? window.screentop: window.screeny; console.log (links, toppos);
【2】 Mobile
Verwenden Sie moveTo() und moveBy() -Methoden, um das Fenster an einen neuen Ort zu verschieben. Diese beiden Methoden werden nur vom IE -Browser unterstützt.
moveTo() empfängt zwei Parameter, nämlich die X- und Y -Koordinatenwerte der neuen Position
<div id = "mydiv"> klicken Sie hier </div> <script> // Verschieben Sie das Fenster auf (0,0) mydiv.onclick = function () {window.moveto (0,100); } </script> moveBy() empfängt zwei Parameter, nämlich die Anzahl der Pixel, die sich in horizontalen und vertikalen Richtungen bewegen.
<div id = "mydiv"> hier klicken </div> <script> // Verschieben Sie das Fenster um 100 Pixel mydiv.onclick = function () {window.moveby (0,100); } </script>Fenstergröße
【1】 Holen Sie sich
outerWidth und outerHeight werden verwendet, um die Größe des Browserfensters selbst darzustellen.
[Hinweis] IE8-Browser unterstützt nicht
// Chrom Returns Oterwidth: 1920; Außenheight: 1030 // IE9 + und Firefox Return Oterwidth: 1550; Außenheigheight: 838 // safari return outterwidth: 1552; outherHeight: 840dokument window.outerHeight: ' + window.outerHeight
Ergebnis: äußere Breite: 1440; Außenhöhe: 743
innerWidth und innerHeight werden verwendet, um die Seitengröße darzustellen, die der Browser -Fenstergröße abzüglich der Breite der eigenen Grenzen und Menübalken des Browsers, Adressstangen, Statusleisten usw. entspricht, entspricht.
[Anmerkung] Da <Iframe> selbst auch Fenstereigenschaften auf der Seite aufweist, beziehen sich innerWidth und innerHeight im Rahmen auf innerWidth und innerHeight des Rahmens selbst.
// Chrome Returns Innerwidth: 1920; Innerheight: 971 // IE9+ Return Innerwidth: 1536; Innerheight: 768 // Firefox Return Innerwidth: 1536; Innerheight: 755 // Safari zurückgegeben. 'Innerwidth:' + window.innnerwidth + '; Innerheight:' + window.innerHeight: ' + window.innerHeight
Ergebnis: Innenbreite: 701; Innerheight: 40
document.documentElement.clientWidth und document.documentElement.clientHeight in DOM kann auch die Seitengröße darstellen und den gleichen Wert wie innerWidth und innerHeight
[Anmerkung] In ähnlicher Weise weisen diese beiden Eigenschaften auch auf die Eigenschaften des Frameworks hin, wenn auf das Framework zugegriffen wird.
// Chrome kehrt die innere Breite zurück: 1920; Innerheight: 971 // IE9+ Rückgabe in der Innerbreite: 1536; Innerheight: 768 // Firefox kehrt die innere Breite zurück: 1536; Innerheight: 755 // Safari kehrt die innere Breite zurück: 1536; InnerHeight: 764 document.body.innerhtml = 'Clientwidth:' + document.documentElement.clientwidth + '; ClientHeight:' + document.documentElement.clientHeight
Ergebnis: Clientbreite: 701; ClientHeight: 40
Obwohl diese beiden Arten von Attributen den gleichen Wert auf dem Computer darstellen, haben sie unterschiedliche Verwendungen auf der mobilen Seite. innerWidth und innerHeight repräsentieren das visuelle Ansichtsfenster, dh den Bereich der Website, den der Benutzer sieht. document.documentElement.clientWidth und clientHeight das Layout -Ansichtsfenster darstellen, unter Bezugnahme auf die Größe des CSS -Layouts.
【2】 Einstellung
Verwenden Sie die beiden Methoden von resizeTo() und resizeBy() um die Größe des Browserfensters zu ändern
[Hinweis] Nur dh und Safari -Browser unterstützen
resizeTo() empfängt zwei Parameter: die neue Breite und die neue Höhe des Browserfensters
<div id = "mydiv"> klicken Sie hier </div> <script> mydiv.onclick = function () {// Die Größe des Browser -Fensters auf 200.200 Fenster.Resizeto (200.200);} </script> resizeBy() erhält zwei Parameter: den Unterschied zwischen der Breite und der Höhe des neuen Fensters des Browsers und des Originalfensters
<div id = "mydiv"> klicken
Öffnen Sie das Fenster
window.open() kann zu einer bestimmten URL navigieren oder ein neues Browserfenster öffnen. Diese Methode empfängt 4 Parameter: die zu geladene URL, das Fensterziel, eine Feature -Zeichenfolge und ein Boolescher Angabe, ob die neue Seite die aktuell geladene Seite im Browser -Verlauf ersetzt.
Parameter
【1】 Oft muss nur der erste Parameter übergeben werden, und die Standardöffnung in einem neuen Fenster
<div id = "mydiv"> klicken Sie hier </div> <script> mydiv.onclick = function () {window.open ("http://baidu.com");} </script>【2】 Der zweite Parameter zeigt den Namen des vorhandenen Fensters oder Frameworks oder die Öffnungsmethode von _self, _parent, _top, _blank usw. an.
<div id = "mydiv"> klicken Sie hier </div> <script> // Öffnen Sie mydiv.onclick = function () {window.open ("http://baidu.com", '_ self');} </script>【3 °
<div id = "mydiv"> klicken window.open ("http://qq.com", "_blank", "height = 500, width = 500, top = 0, links = 200")} </script>[4] Der vierte Parameter ist nur dann nützlich, wenn der zweite Parameter mit dem Namen eines Fensters existiert. Es ist ein boolescher Wert, der erklärt, ob die vom erste Parameter angegebene URL den aktuellen Eintrag im Fenster -Browserverlauf (TRUE) ersetzen soll, oder sollte ein neuer Eintrag im Fenster -Browser -Verlauf (Falsch) erstellt werden, was die Standardeinstellung ist
Rückgabewert
Der Rückgabewert der open() -Methode ist das Fensterobjekt des neuen Fensters
<div id = "mydiv"> klicken Sie hier </div> <script> mydiv.onclick = function () {var w = window.open (); W.Document.body.innerhtml = 'Testtext';} </script>Das neu erstellte Fensterobjekt verfügt über eine Opener -Eigenschaft, die das ursprüngliche Fensterobjekt enthält, das es geöffnet hat
<div id = "mydiv"> klicken Sie hier </div> <script> mydiv.onclick = function () {var w = window.open (); console.log (W.Opener === Fenster); // true} </script>Filter
Die meisten Browser verfügen über Popup-Filtersysteme. Im Allgemeinen wird die Methode open() nur aufgerufen, wenn der Benutzer manuell auf eine Schaltfläche oder einen Link klickt. Der JavaScript -Code schlägt normalerweise fehl, wenn versucht wird, ein Popup -Fenster zu öffnen, wenn der Browser ursprünglich geladen wird. Wenn abgefangen, ist der Rückgabewert undefined
<div id = "mydiv"> klicken
Fenster schließt
Genau wie die Methode open() ein neues Fenster öffnet, schließt die Methode close() ein Fenster. Wenn das Fensterobjekt W erstellt wurde, können Sie den folgenden Code verwenden, um ihn auszuschalten
<div> <span id = "span1"> Fenster öffnen </span> <span id = "span2"> Fenster schließen </span> </div> <script> var w; span1.onclick = function () {w = window.open ();} span2.onclick = function () {if (w) {w.closes (); }} </script> Das Objekt W im neuen Fenster verfügt auch über eine closed Eigenschaft, um festzustellen, ob es geschlossen ist.
<div id = "mydiv"> klicken Sie hier </div> <script> // False zuerst, dann TrueMyDiv.onclick = function () {var w = window.open (); console.log (w.closed); // false setTimeout (function () {W.CLOSE (); console.log (W.closed); // true}, 1000); } </script>Kleine Anwendung
Das von window.open() zurückgegebene Objekt kann das Öffnen und Schließen eines neu geöffneten Fensters bedienen
<div id = "mydiv"> Fenster öffnen </div> <script> var w = null; mydiv.onclick = function () {// wenn w nicht existiert, dh kein neues Fenster wird geöffnet, oder das neue Fenster ist geschlossen, wenn (! mydiv.innerhtml = 'Fenster schließen'; // Wenn w existiert, bedeutet dies, dass das neue Fenster geöffnet ist} else {W.CLOSE (); w = null; mydiv.innerhtml = 'Öffnen Fenster'; }} </script>Zusammenfassen
In diesem Artikel wird hauptsächlich die grundlegenden Operationen von JavaScript -Browser -Windows vorgestellt. Es ist sehr einfach zu verstehen, aber sehr praktische Funktionen. Ich hoffe, es wird für die tägliche Verwendung von JavaScript aller hilfreich sein.