Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Javascript function openFullscreen() , how to get it worked for several iframes on the page

On page I have an iframe with *.pdf file in src.

<div class="node--view-mode-full">

<p><iframe allow="fullscreen" allowfullscreen="" frameborder="0" height="980" scrolling="no" src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="660"></iframe></p>

<p><iframe allow="fullscreen" allowfullscreen="" frameborder="0" height="980" scrolling="no" src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="660"></iframe></p>

</div>

The build-in pdf-viewers in browsers now does not support fullscreen mode in iframes.

I found the solution https://www.w3schools.com/howto/howto_js_fullscreen.asp , that resolve the problem – open the iframe in fullscreen mode. In example from w3schools the button, that open the iframe already exist in HTML https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_fullscreen.

In my solution, I add button via javascript, because pages with iframes already exist without such buttons:

jQuery(document).ready(function($){

    $(".node--view-mode-full iframe[src*='.pdf']").each(function (index) {
        $(this).addClass('fullscreenframe');
        $(this).attr('id', 'fullscreen-'+index);
        $('<button onclick="openFullscreen()">Open in Fullscreen Mode</button>&nbsp;<strong>Tip:</strong> Press the "Esc" key to exit full screen.<br>').insertBefore(this);
    });

});

and after that add a functtion that open iframe on fullscreen (same as on w3schools):

function openFullscreen() {
  var elem = document.getElementsByClassName("fullscreenframe")[0];
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
};

Everysing working fine when I have only one iframe with *.pdf on the page. But when I have two or more iframes on the page, and I clicking on a any button "Open in Fullscreen Mode" near any iframe, I always see only first *.pdf on fullsceen mode…

I know, that it because I get only first iframe in elem = document.getElementsByClassName("fullscreenframe")[0];

I know that I need to use each or simething like that, but I can’t to resolve it. In search all solutions about one fullscreen element on the page and there is no solution about multiple elements on the page… Thank you.

Tags:

2

Answers


  1. 0

    Maybe something like this:

    jQuery(document).ready(function($){

    $(".node--view-mode-full iframe[src*='.pdf']").each(function (index) {
        $(this).addClass('fullscreenframe');
        $(this).attr('id', 'fullscreen-'+index);
        $('<button onclick="openFullscreen(' + index + ')">Open in Fullscreen Mode</button>&nbsp;<strong>Tip:</strong> Press the "Esc" key to exit full screen.<br>').insertBefore(this);
    });

});


function openFullscreen(index) {
    var elem = document.getElementsByClassName("fullscreenframe")[index];
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.webkitRequestFullscreen) { /* Safari */
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE11 */
      elem.msRequestFullscreen();
    }
}
    Login or Signup to reply.
  2. 0

    Why not consolidate on jQuery?

    Note the snippet below is not allowed to run in Stackoverflow

    This one will run https://jsfiddle.net/mplungjan/0v1kamyf/ but still give error due to security

    const fullScreen = elem => elem.requestFullscreen && elem.requestFullscreen(); // all modern browsers including Safari

$(function() {
  $(".node--view-mode-full iframe[src*='.pdf']").each(function(index) {
    $(this).addClass('fullscreenframe');
    $(this).attr('id', 'fullscreen-' + index);
    $('<button class="fullScreen">Open in Fullscreen Mode</button>&nbsp;<strong>Tip:</strong> Press the "Esc" key to exit full screen.<br>').insertBefore(this);
  });
  $(".fullScreen").on("click", function() {
    const $iFrame = $(this).closest('p').find('iframe.fullscreenframe');
    if ($iFrame) fullScreen($iFrame.get(0)); // pass the DOM element
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="node--view-mode-full">
  <p><iframe allow="fullscreen" allowfullscreen="" frameborder="0" height="980" scrolling="no" src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="660"></iframe></p>
  <p><iframe allow="fullscreen" allowfullscreen="" frameborder="0" height="980" scrolling="no" src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="660"></iframe></p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search