js实现各浏览器全屏代码实例,JavaScript设计模式之代理模式简单实例教程

本文实例讲述了JavaScript设计模式之代理模式。分享给大家供大家参考,具体如下:

开始之前请先确保自己安装了Node.js环境,如果没有安装,大家可以到脚本之家下载安装。

现代浏览器包括ie11,可以直接用h5的全屏api实现
低版本的IE需要通过ActiveX插件实现;

一、代理模式概念

代理,顾名思义就是帮助别人做事,GoF对代理模式的定义如下:

代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问。代理模式使得代理对象控制具体对象的引用。代理几乎可以是任何对象:文件,资源,内存中的对象,或者是一些难以复制的东西。

解释:房屋中介,可以代理帮助卖家把房子卖给买家,这中间卖家说要卖的价钱就可以了,买家也可以提出自己要买的房型,中介可以帮忙处理中间环节。最后达成买卖。中介可以同时代理很多房屋买卖,并且可以代理租房事宜。

代理模式的组成:

抽象角色:通过接口或抽象类声明真实角色实现的业务方法。

代理角色:实现抽象角色,是真实角色的代理,通过真实角色的业务逻辑方法来实现抽象方法,并可以附加自己的操作。

真实角色:实现抽象角色,定义真实角色所要实现的业务逻辑,供代理角色调用。

1.在项目文件夹安装两个必须的依赖包

//直接上代码

二、代理模式的作用和注意事项

npm install superagent --save-dev
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <button onclick="fullScreen()">现代浏览器全屏</button>

    <button onclick="exitScreen()">现代浏览器退出</button>

    <button onclick="iefull()">低版本ie全屏</button>
  </body>
  <script src="js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    //全屏
    function fullScreen(){
      var el = document.documentElement;
      var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;   
        if(typeof rfs != "undefined" && rfs) {
          rfs.call(el);
        };
       return;
    }
    //退出全屏
    function exitScreen(){
      if (document.exitFullscreen) { 
        document.exitFullscreen(); 
      } 
      else if (document.mozCancelFullScreen) { 
        document.mozCancelFullScreen(); 
      } 
      else if (document.webkitCancelFullScreen) { 
        document.webkitCancelFullScreen(); 
      } 
      else if (document.msExitFullscreen) { 
        document.msExitFullscreen(); 
      } 
      if(typeof cfs != "undefined" && cfs) {
        cfs.call(el);
      }
    }
    //ie低版本的全屏,退出全屏都这个方法
    function iefull(){
      var el = document.documentElement;
      var rfs = el.msRequestFullScreen;
      if(typeof window.ActiveXObject != "undefined") {
        //这的方法 模拟f11键,使浏览器全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if(wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
    }
    //注:ie调用ActiveX控件,需要在ie浏览器安全设置里面把 ‘未标记为可安全执行脚本的ActiveX控件初始化并执行脚本' 设置为启用
  </script>
</html>

模式作用:

1、远程代理(一个对象将不同空间的对象进行局部代理)

2、虚拟代理(根据需要创建开销很大的对象如渲染网页暂时用占位代替真图)

3、安全代理(控制证实对象的访问权限)

4、智能指引(调用对象代理处理另外一些事情如垃圾回收机制)

superagent 是一个轻量的,渐进式的ajax
api,可读性好,学习曲线低,内部依赖nodejs原生的请求api,适用于nodejs环境下

注:实际应用中,可通过区分ie11
ie10,其它浏览器,控制按钮的显示、隐藏来实现 适用各浏览器的全屏功能;

注意事项:

1、不能滥用代理,有时候仅仅是给代码增加复杂度

npm install cheerio --save-dev

您可能感兴趣的文章:

  • 用html5
    js实现点击一个按钮达到浏览器全屏效果
  • JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
  • Js浏览器全屏代码(模仿按F11)
  • js控制浏览器全屏示例代码
  • 利用浏览器全屏api实现js全屏
  • JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
  • javascript实现控制浏览器全屏
  • 浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
  • JavaScript控制浏览器全屏显示简单示例

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图