web-dev-qa-db-fra.com

Comment faire un iFrame pour passer en plein écran sur un clic de bouton?

Je voudrais faire apparaître l'iFrame en plein écran avec un clic sur le bouton en utilisant JavaScript.

<iframe id="iframe_view" class="embed-responsive-item container well well-small span6" style="height: 720px; width: 1280px; background-color: #2e2e2e;" src="https://www.google.com/" frameborder="0" scrolling="no" allowfullscreen>
javascriptiframeonclickfullscreen
11
ssk

Vous devrez faire deux choses: faire la fenêtre en plein écran, puis le <iframe> pour remplir toute la taille.

Vous pouvez le faire passer en plein écran avec JS comme dans this SO answer .

Ensuite, pour le rendre en taille réelle, ajoutez simplement quelques styles, comme ci-dessous. Ce que fait ce script JS, c'est ajouter une classe avec ces styles au <iframe>.

[~ # ~] js [~ # ~] 

document.getElementsByTagName("iframe")[0].className = "fullScreen";

[~ # ~] css [~ # ~] 

body, html {
    height: 100%;
    margin: 0;
}
.fullScreen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

Voir cet exemple * fonctionnant partiellement sur JSFiddle.

* fonctionne partiellement car JSFiddle n'autorise pas la méthode plein écran car il la juge dangereuse. Mais cela devrait fonctionner pour vous.

14
Jonathan Lam