Kategoriler
Kodlama

JavaScript tarayıcı tam ekran geçişi

Web sitesine tarayıcıyı tam ekran yapan bir buton eklemek.

Bazen web uygulamalarında tarayıcının tam ekrana geçmesini ve uygulamanın o şekilde kullanılmasını istersiniz, bunu kullanıcı tarayıcı menüsünden yapabilir ancak sitenin içerisinde bir buton koyarak bunu yapabileceğini kullanıcıya göstermek gayet mantıklı ve uygun bir yöntemdir.

Aşağıdaki yazacağım JavaScript ve jQuery kodu tüm modern tarayıcılarda çalışıyor. Örnek için https://toggle-fullscreen-jquery.glitch.me/

Standart JavaScript fonksiyonu:

function toggleFullScreen() {
  var doc = window.document;
  var docEl = doc.documentElement;

  var requestFullScreen =
    docEl.requestFullscreen ||
    docEl.mozRequestFullScreen ||
    docEl.webkitRequestFullScreen ||
    docEl.msRequestFullscreen;
  var cancelFullScreen =
    doc.exitFullscreen ||
    doc.mozCancelFullScreen ||
    doc.webkitExitFullscreen ||
    doc.msExitFullscreen;

  if (
    !doc.fullscreenElement &&
    !doc.mozFullScreenElement &&
    !doc.webkitFullscreenElement &&
    !doc.msFullscreenElement
  ) {
    requestFullScreen.call(docEl);
  } else {
    cancelFullScreen.call(doc);
  }
}

Yukarıdaki JavaScript’in kullanım örneği:

<button onclick="toggleFullScreen()">⛶</button>
/* veya */
<a href="#" onclick="toggleFullScreen()">⛶</a>

jQuery versiyonu:

$("#tamekran").on("click", function () {
  if (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  ) {
    //in fullscreen, so exit it
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  } else {
    //not fullscreen, so enter it
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    }
  }
});

Yukarıdaki JavaScript’in kullanım örneği:

<button class="btn" type="button" id="tamekran">⛶</button>
/* veya */
<a href="#" class="btn" id="tamekran">⛶</a>

Canlı çalışan örnek: https://glitch.com/~toggle-fullscreen-jquery

wolkanca.com’da JavaScript tarayıcı tam ekran geçişi veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, JavaScript tarayıcı tam ekran geçişi için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO - wolkanca mahallesi gmail sokak nokta com.