JavaScript'te “window.open()” ile Dikey Kaydırma Çubukları Nasıl Oluşturulur?

Javascript Te Window Open Ile Dikey Kaydirma Cubuklari Nasil Olusturulur



“pencere.open()” JavaScript yöntemi, geliştiricilerin web sayfalarındaki başka bir pencereye bağlantı vermelerine olanak tanır. Bu pencere, kullanıcı tarafından belirtilen bir eylem gerçekleştirildiğinde çağrılır.

Kısacası, ana işlevi “pencere.open()” Yöntem, ana web sayfası arayüzünü bozmadan ana web sayfası üzerinden yeni bir pencere açmaktır. Bazı senaryolarda yeni pencere başarıyla açılıyor ancak kaydırma çubuğu hiç görünmüyor, bu da kullanıcılarda kötü bir izlenim bırakıyor.





Bu hızlı kılavuz, JavaScript'te window.open() yöntemiyle dikey kaydırma çubuğu oluşturma sürecini ayrıntılı olarak açıklamaktadır.



JavaScript'te “window.open()” ile Dikey Kaydırma Çubukları Nasıl Oluşturulur?

“pencere.open()” yöntemi, yeni web sayfası içeriğinin uzunluğuna ve açılan pencerenin boyutuna bağlı olarak varsayılan olarak dikey bir kaydırma çubuğu ekler. Web sayfasının içeriği pencere boyutundan büyükse kaydırma çubuğu varsayılan olarak herhangi bir CSS özelliği uygulanmadan eklenir. Ancak geliştirici özel kaydırma çubuğu eklemek isterse o zaman aşağıdaki örneklerde açıklanan yöntemleri takip edebilirsiniz.



Sözdizimi





için sözdizimi “pencere.open()” yöntem aşağıda belirtilmiştir:

pencere. açık ( yol , varış noktası , KazanmakFeat )

Burada, 'yol' yeni bir pencerede açılacak web sayfasının yoludur. 'varış noktası' görüntülenecek yeni pencerenin konumudur; şu şekilde ayarlanabilir: 'boşluk' , “ebeveyn” , “kendi” veya 'tepe'. Üçüncü parametre “winFeat” veya pencere özellikleridir, pencereyi özelleştirme ihtiyacına göre ayarlanabilen çeşitli değerler sunar.



Yeni açılan pencerede dikey kaydırma çubuğu oluşturmak için bazı örneklere göz atalım. “pencere.open()” yöntem.

Örnek: “window.open()” Yöntemi ile “scrollbars” Pencere Özelliğinin Kullanımı

Bu durumda, “pencere.open()” boyunca kullanılan yöntem “kaydırma çubukları” Aşağıda gösterildiği gibi, yeni açılan bir pencere için dikey kaydırma çubuğunu ayarlamak için Pencere Özellikleri:

< KAFA >
< komut dosyası türü = 'metin/javascript' >
işlev setScroll ( ) {
öyleydi yeniKazanç = pencere. açık ( 'https://linuxhint.com' , 'tepe' , 'genişlik=500, yükseklik=500, kaydırma çubukları=evet' ) ;
}
senaryo >
KAFA >
< vücut >
< P > Linuxhint Blogunu açmak için aşağıdaki düğmeye basın - ekran penceresi. P > Beni tıkla düğme >
vücut >

Yukarıdaki kodun açıklaması:

  • İlk önce “setScroll()” fonksiyon içinde tanımlanır etiket. Ayrıca şunları içeren “newWin” değişkeni de oluşturulur. “pencere.open()” onun içindeki yöntem.
  • Daha sonra, web sayfasının ilk parametresi olan “link”i “pencere.open()” yöntem. Ayrıca, yeni pencerenin web tarayıcısının en üst konumunda görüntülenmesi için ikinci parametreye “top” değerini ayarlayın.
  • Bundan sonra, pencere davranışını özelleştirmek için pencere özelliklerini kullanın. 'Genişlik' , 'yükseklik' Ve “kaydırma çubukları” sırasıyla pencerenin genişliğini, yüksekliğini ve kaydırma çubuğunu ayarlamak için.
  • Sonunda bir oluştur 'düğme' tetikleyen unsur “setScroll()” işlevini kullanarak 'tıklamada' olay dinleyicisi.

Derleme bittikten sonra çıktı şöyle görünür:

Çıktı, kaydırma çubuğunun yeni oluşturulan pencereye eklendiğini doğrular.

Örnek 2: Kaydırma Çubuğunu Manuel Olarak Ayarlama

Kaydırma çubuğunu ayarlamanın başka bir yolu da CSS'yi kullanmaktır. “taşma-y” Ve “taşma-x” Aşağıda gösterildiği gibi yeni bir pencerede açılacak olan ikincil sayfadaki özellikler:

< KAFA >
< komut dosyası türü = 'metin/javascript' >
işlev setScroll ( ) {
öyleydi yeniKazanç = pencere. açık ( 'https://linuxhint.com' , tepe , 'genişlik=500,yükseklik=500,yeniden boyutlandırılabilir,kaydırma çubukları=1);
}



Ekran penceresinde Linuxhint Blog'u açmak için aşağıdaki düğmeye basın.

Beni Tıklayın

Yukarıdaki kodun açıklaması:

  • Öncelikle bir tane oluşturun “setScroll()” işlevi vardır ve içinde şunu kullanır: “pencere.open()” Yukarıdaki örnekte yapılan yöntemin aynısı.
  • Ayrıca ekstra bir pencere özelliği ekleyin “yeniden boyutlandırılabilir” ve değerini değiştirin “kaydırma çubukları” özellikler '1' Dikey kaydırma çubuğunu ayarlamak için.

Şimdi, ilk parametre olarak bağlantısı sağlanan web sayfasının CSS dosyasını açın. “pencere.open()” yöntem. Bizim durumumuzda web sayfasının adı: 'linuxint' bu yüzden CSS dosyasını açın ve içine aşağıdaki kodu ekleyin:

< stil >
HTML {
taşma - X : gizlenmiş ;
taşma - Ve : Oto ;
}
stil >

Yukarıdaki CSS özellikleri “taşma-x” Ve “taşma-y” yatay kaydırma çubuğunu gizleyin ve tüm HTML sayfası için dikey kaydırma çubuğunu pencerenin uzunluğuna göre ayarlayın.

Yukarıdaki kod parçacıklarını her iki dosyaya da ekleyip derledikten sonra çıktı şu şekilde görünür:

Çıktı, “window.open()” yöntemi kullanılarak açılan pencereye dikey kaydırma çubuğunun eklendiğini göstermektedir.

Çözüm

Dikey kaydırma çubukları oluşturmak için “pencere.open()” yöntem, “kaydırma çubukları” pencerenin sağladığı özellik şu şekilde ayarlanabilir: 'Evet' veya '1' . Diğer bir yöntem ise “window.open()” metodunda ilk parametre olarak linki geçen web sayfasına ait CSS veya HTML dosyasını açmak ve orada CSS’den faydalanmaktır. “taşma-x” Ve “taşma-y” özellikler. Bu blog, JavaScript'te window.open() yöntemiyle dikey kaydırma çubuğu eklemenin yollarını açıkladı.