Jak zrobić iFrame, aby przejść do trybu pełnoekranowego po kliknięciu przycisku?

Question

Chciałbym, aby iFrame pojawiać się na pełnym ekranie za pomocą kliknięcia przycisku przy użyciu 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

Trzeba będzie zrobić dwie rzeczy: po podjęciu oknie na pełnym ekranie, a następnie aby wypełnić cały rozmiar.

Możesz go uruchomić na pełnym ekranie z JS, np. W this SO answer.

Następnie, aby uzyskać pełny rozmiar, wystarczy dodać kilka stylów, jak na przykład poniżej. To, co robi ten skrypt JS, dodaje klasę z tymi stylami do .

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

Zobacz this partially working* example na JSFiddle.

_{* częściowo działa, ponieważ JSFiddle nie zezwala na metodę pełnoekranową, ponieważ uważa to za niebezpieczne. Ale to powinno działać dla ciebie.}