Come fare un iFrame per andare a schermo intero con un clic del mouse?

Question

Vorrei fare in modo che l'iFrame appaia a schermo intero con un clic del pulsante utilizzando 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> 

Answer 1

Si dovrà fare due cose: fare il fullscreen finestra, quindi il per riempire l'intera dimensione.

Puoi farlo andare a schermo intero con JS come in this SO answer.

Quindi, per renderlo a dimensione intera, basta aggiungere alcuni stili, come di seguito. Quello che fa questo script JS è aggiungere una classe con questi stili allo .

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; 
} 

Vedere this partially working* example su JSFiddle.

_{* parzialmente funzionante perché JSFiddle non consente il metodo a schermo intero perché lo ritiene non sicuro. Ma dovrebbe funzionare per te.}