The 'window.open()' JavaScript metóda umožňuje vývojárom odkazovať na iné okno na ich webovej stránke. Toto okno sa vyvolá, keď používateľ vykoná určitú akciu.
Stručne povedané, hlavná funkčnosť 'window.open()' metóda je otvoriť nové okno nad hlavnou webovou stránkou bez narušenia rozhrania hlavnej webovej stránky. V niektorých scenároch sa nové okno úspešne otvorí, ale rolovacia lišta sa vôbec nezobrazí, čo na používateľov vyvoláva zlý dojem.
Tento rýchly sprievodca podrobne popisuje proces vytvorenia vertikálneho posúvača pomocou metódy window.open() v jazyku JavaScript.
Ako vytvoriť zvislé posúvače pomocou „window.open()“ v JavaScripte?
The 'window.open()' metóda štandardne pridáva zvislý posuvník v závislosti od dĺžky obsahu novej webovej stránky a veľkosti otvoreného okna. Ak je obsah webovej stránky väčší ako veľkosť okna, posuvník sa predvolene pridá bez použitia akýchkoľvek vlastností CSS. Ak však vývojár chce pridať vlastný posuvník, môžete postupovať podľa metód vysvetlených v príkladoch nižšie.
Syntax
Syntax pre 'window.open()' metóda je uvedená nižšie:
okno. OTVORENÉ ( cesta , destinácia , winFeat )Tu, 'cesta' je cesta webovej stránky, ktorá sa otvorí v novom okne. The 'destinácia' je umiestnenie nového okna, ktoré sa má zobraziť, možno ho nastaviť 'prázdne' , 'rodič' , 'seba' alebo „vrchol“. Tretím parametrom je „winFeat“ alebo vlastnosti okna, ponúka rôzne hodnoty, ktoré je možné nastaviť podľa potreby prispôsobenia okna.
Pozrime sa na niekoľko príkladov na vygenerovanie vertikálneho posúvača v novootvorenom okne pomocou 'window.open()' metóda.
Príklad: Použitie funkcie okna „scrollbars“ s metódou „window.open()“.
V tomto prípade, 'window.open()' metóda sa používa pozdĺž 'posúvacie lišty' Funkcie okna na nastavenie zvislého posúvača pre novo otvorené okno, ako je uvedené nižšie:
< hlavu >< typ skriptu = 'text/javascript' >
funkciu setScroll ( ) {
bol newWin = okno. OTVORENÉ ( 'https://linuxhint.com' , 'top' , 'width=500,height=500,scrollbars=yes' ) ;
}
skript >
hlavu >
< telo >
< p > Stlačením tlačidla nižšie otvoríte blog Linuxhint na in - okno obrazovky. p > Klikni na mňa tlačidlo >
telo >
Vysvetlenie vyššie uvedeného kódu:
- Po prvé, 'setScroll()' funkcia je definovaná vo vnútri '
Stlačením tlačidla nižšie otvoríte blog Linuxhint v okne na obrazovke.
Kliknite na mňa
Popis vyššie uvedeného kódu:
- Najprv vytvorte a 'setScroll()' funkciu a vo vnútri využíva 'window.open()' metóda rovnaká ako vo vyššie uvedenom príklade.
- Pridajte tiež ďalšiu funkciu okna 'zmeniť veľkosť' a upraviť hodnotu 'posúvacie lišty' funkcie na '1' na nastavenie vertikálneho posúvača.
Teraz otvorte súbor CSS webovej stránky, ktorej odkaz je uvedený ako prvý parameter na 'window.open()' metóda. V našom prípade je to názov webovej stránky 'linuxint' takže otvorte jeho súbor CSS a vložte doň nasledujúci kód:
< štýl >html {
pretečeniu - X : skryté ;
pretečeniu - a : auto ;
}
štýl >
Vyššie uvedené vlastnosti CSS 'pretečenie-x' a 'overflow-y' skryť vodorovný posuvník a nastaviť zvislý posuvník pre celú HTML stránku podľa dĺžky okna.
Po vložení a kompilácii vyššie uvedených úryvkov kódu do oboch súborov bude výstup vyzerať takto:
Výstup ukazuje, že do okna otvoreného pomocou metódy „window.open()“ bol pridaný zvislý posuvník.
Záver
Na vytvorenie zvislých posuvníkov pomocou 'window.open()' metóda, 'posúvacie lišty' možno nastaviť funkciu poskytovanú oknom 'Áno' alebo '1' . Ďalším spôsobom je otvoriť súbor CSS alebo HTML pre webovú stránku, ktorej odkaz je odovzdaný ako prvý parameter v metóde „window.open()“ a použiť CSS 'pretečenie-x' a 'overflow-y' vlastnosti. Tento blog vysvetľuje spôsoby pridania vertikálneho posúvača pomocou metódy window.open() v jazyku JavaScript.