Hur skapar man vertikala rullningslister med 'window.open()' i JavaScript?

Hur Skapar Man Vertikala Rullningslister Med Window Open I Javascript



De 'window.open()' JavaScript-metoden tillåter utvecklare att länka till ett annat fönster på deras webbsida. Detta fönster anropas när en specificerad åtgärd utförs av användaren.

Kort sagt, huvudfunktionen hos 'window.open()' Metoden är att öppna ett nytt fönster över huvudwebbsidan utan att störa huvudwebbsidans gränssnitt. I vissa scenarier öppnas det nya fönstret framgångsrikt men rullningslisten visas inte alls, vilket ger ett dåligt intryck till användarna.







Den här snabbguiden utvecklar processen för att skapa en vertikal rullningslist med metoden window.open() i JavaScript.



Hur man skapar vertikala rullningslister med 'window.open()' i JavaScript?

De 'window.open()' metod lägger som standard till en vertikal rullningslist beroende på längden på det nya webbsidans innehåll och storleken på det öppnade fönstret. Om innehållet på webbsidan är större än fönsterstorleken läggs rullningslisten till som standard utan att använda några CSS-egenskaper. Men om utvecklaren vill lägga till en anpassad rullningslist kan du följa metoderna som förklaras i exemplen nedan.



Syntax





Syntaxen för 'window.open()' metoden anges nedan:

fönster. öppen ( väg , destination , winFeat )

Här, 'väg' är sökvägen till webbsidan som kommer att öppnas i ett nytt fönster. De 'destination' är platsen för det nya fönstret som ska visas kan det ställas in på 'tom' , 'förälder' , 'själv' eller 'topp'. Den tredje parametern är 'winFeat' eller fönsterfunktioner, den erbjuder olika värden som kan ställas in efter behovet av att anpassa fönstret.



Låt oss ta en titt på några exempel för att skapa en vertikal rullningslist i det nyöppnade fönstret med hjälp av 'window.open()' metod.

Exempel: Användning av 'scrollbars' fönsterfunktion med metoden 'window.open()'.

I det här fallet 'window.open()' metoden används längs 'rullningslister' Fönsterfunktioner för att ställa in den vertikala rullningslisten för ett nyöppnat fönster, som visas nedan:

< huvud >
< skripttyp = 'text/javascript' >
fungera setScroll ( ) {
var newWin = fönster. öppen ( 'https://linuxhint.com' , 'topp' , 'width=500,height=500,scrollbars=yes' ) ;
}
manus >
huvud >
< kropp >
< sid > Tryck på knappen nedan för att öppna Linuxhint Blog på insidan - skärmfönster. sid > Klicka här knapp >
kropp >

Förklaring av ovanstående kod:

  • Först, den 'setScroll()' funktionen definieras inuti '


    Tryck på knappen nedan för att öppna Linuxhint Blog i fönstret på skärmen.

    Klicka på mig

    Beskrivning av ovanstående kod:

    • Skapa först en 'setScroll()' funktion, och inuti den använder den 'window.open()' samma metod som i exemplet ovan.
    • Lägg också till en extra fönsterfunktion för 'ändrar storlek' och ändra värdet på 'rullningslister' funktioner till '1' för att ställa in den vertikala rullningslisten.

    Öppna nu CSS-filen för webbsidan vars länk tillhandahålls som den första parametern till 'window.open()' metod. I vårt fall är webbsidans namn 'linuxint' så öppna dess CSS-fil och infoga följande kod i den:

    < stil >
    html {
    svämma över - x : dold ;
    svämma över - och : bil ;
    }
    stil >

    Ovanstående CSS-egenskaper för 'overflow-x' och 'overflow-y' dölj den horisontella rullningslisten och ställ in den vertikala rullningslisten för hela HTML-sidan enligt fönstrets längd.

    Efter att ha infogat och kompilerat ovanstående kodsnuttar i båda filerna ser utdata ut så här:

    Utdata visar att en vertikal rullningslist har lagts till i fönstret som öppnats med metoden 'window.open()'.

    Slutsats

    För att skapa vertikala rullningslister med 'window.open()' metod, den 'rullningslister' funktionen som tillhandahålls av fönstret kan ställas in på 'ja' eller '1' . Ett annat sätt är att öppna CSS- eller HTML-filen för webbsidan vars länk skickas som den första parametern i metoden 'window.open()' och där använda CSS 'overflow-x' och 'overflow-y' egenskaper. Den här bloggen har förklarat sätten att lägga till en vertikal rullningslist med metoden window.open() i JavaScript.