javascript - 如何在点击时切换全屏

Question

import { Component, OnInit, ElementRef } from '@angular/core';
declare var JQuery : any; 

@Component({
  selector: 'app-presentation',
  templateUrl: './presentation.component.html',
  styleUrls: ['./presentation.component.scss']
})
export class PresentationComponent implements OnInit {

  public count=0;
  public imgUrl ='http://192.168.1.90:8080/pdf/temp';

  constructor( public _eleRef : ElementRef ) {
    this.count=0
    this.imgUrl='http://192.168.1.90:8080/pdf/temp'+this.count+".jpg"
   }

  ngOnInit() {
    jQuery(this._eleRef.nativeElement).find('#Fullscreen').on('click',function(){
        jQuery('#exampleImage').width(jQuery(window).width());
        jQuery('#exampleImage').height(jQuery(window).height());
     });
  }

  back(){this.count--;
    if(this.count>=0 && this.count<13){
    
    this.imgUrl='http://192.168.1.90:8080/pdf/temp'+this.count+".jpg"
    // this.imgUrl = 'http://wallpaperdj.com/wallpapers/like_leaves_in_the_wind-1600x900.jpg';
    }
     else{
      this.count++;
    }
  }

  next(){this.count++;
     if(this.count>=0 && this.count<13){
    
    this.imgUrl='http://192.168.1.90:8080/pdf/temp'+this.count+".jpg"
     }
    else{
      this.count--;
    }
  }

}

.slide-control {
    z-index: 5;
    background-color: #323232;
    overflow: hidden;
    border: 0;
    padding: 0;
    width: 100%;
    color: #fff;
    font-size: 13px;
    max-height: 56px;
    min-height: 50px;
    ///text-align: center;
}

.control {
    font-size: 20px;
    padding: 10px;
    cursor: pointer;
}

.slide-control #fullscreen {
    float: right !important;
}

.imageArea {
    background-color: #e5e5e5;
    border: 1px inset #323232;
}

<div class="row imageArea">
    <div class="mx-auto">
        <img [src]="imgUrl" id="exampleImage" class="img-fluid" alt="Responsive image">
    </div>
    <div class="slide-control form-inline">
        <div class="mx-auto">
            <span class="control" (click)="back(count)"><i class="fa fa-arrow-left" aria-hidden="true"></i></span>
            <span>{{count+1}} / 13</span>
            <span class="control" (click)="next(count)"><i class="fa fa-arrow-right" aria-hidden="true"></i></span>
        </div>
        <div class="fullscreen float-right">
            <span class="control" id="Fullscreen"><i class="fa fa-arrows-alt text-right" aria-hidden="true"></i></span>
        </div>
    </div>
</div>

你好，我正在使用 Angular 2 设计我自己的演示文稿查看器。我有一个全屏按钮，当我单击该按钮时，它会缩放我的图像，使其等于我的容器 div 大小。但我想让那个按钮切换。这意味着当我再次单击该按钮时，它应该在页面加载时(在缩放大小之前)显示我的缩放图像作为其原始大小。

Answer 1

试试这个

function toggleFullScreen() {
  if (!document.fullscreenElement && 
      !document.mozFullScreenElement && 
      !document.webkitFullscreenElement && 
      !document.msFullscreenElement
  ) {
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}