全画面表示 javascript screenfull.js

【例１】
(HTML)
<img id="img"
  src="img.jpg" />


(script.js)
window.onload = function() {
 
    document.body.onclick = function() {
        if (this.webkitRequestFullScreen) {
        this.webkitRequestFullScreen();
        } else if (this.mozRequestFullScreen) {
            this.mozRequestFullScreen();
        } else if (this.msRequestFullScreen) {
            this.msRequestFullScreen();
        } else if (this.RequestFullScreen) {
            this.RequestFullScreen();
        } else {
            alert("このブラウザは全画面に対応していません。")
        }
    };
};


【例２】
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/screenfull.js/1.0.4/screenfull.min.js"></script>
<script>
   $(document).ready(function(){
    $('#go-full').click(function() {
        if (this.webkitRequestFullScreen) {
          this.webkitRequestFullScreen($('#my-full-site')[0]);
        } else if (this.mozRequestFullScreen) {
          this.mozRequestFullScreen($('#my-full-site')[0]);
        } else if (this.msRequestFullScreen) {
          this.msRequestFullScreen($('#my-full-site')[0]);
        } else if (this.RequestFullScreen) {
          this.RequestFullScreen($('#my-full-site')[0]);
        } else {
          alert("このブラウザは全画面に対応していません。");
        }
      })
   })
</script>
<button id="go-full">Go Fullscreen</button>
<iframe id="my-full-site" src="http://www.cxdnext.co.jp"></iframe>