最新消息:从今天开始,做一个有好习惯的人。

浏览器全屏js,兼容google Chrome

前端 迷路的老鼠 2632浏览 0评论

不知道为什么,我觉得我现在越来越像一个美工,这可不是歧视美工,但是不得不说到底还是干了美工的活。

为了让系统看起来更好顺眼,也为了能有点特色,所以添加了一个“全屏模式”,但是大义上是打着用户体验的口号;

顺德

顺德

不过全屏起来效果确实很显著,有点对不起人的是只能在IE下实现,并且是IE 8+,好吧,反正不是开放式系统,将就吧。相信大家随便百度一下都可以找到这段js代码,但是好人做到底,写都写这么多了,代码也贴上来吧。

1
2
3
4
opean = function(){
var wsh = new ActiveXObject("WScript.Shell");
wsh.sendKeys("{F11}");
}

至于全部代码嘛,相信大家都能自己做。

效果是出来了,不过其实我更加想在google Chrome里面实现,后来尝试了很多方法,显然是不可取的。在这里我声明一下,技术性的东西还是用google比较好,反正我百度了好久也没有找到解决方案,还是谷歌实在。

demo如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
FullScreen API

<style><!--
body {
background: #F3F5FA;
}
#container {
width: 600px;
padding: 30px;
background: #F8F8F8;
border: solid 1px #ccc;
color: #111;
margin: 20px auto;
border-radius: 3px;
}

#specialstuff {
background: #33e;
padding: 20px;
margin: 20px;
color: #fff;
}
#specialstuff a {
color: #eee;
}

#fsstatus {
background: #e33;
color: #111;
}

#fsstatus.fullScreenSupported {
background: #3e3;
}
--></style>&nbsp;
<div id="container">
<h1>FullScreen API Testing</h1>
<div id="specialstuff">

Inside here is special stuff which will go fullscreen

As of 10/20/2011, you'll need Safari 5.1,

<a href="http://tools.google.com/dlpage/chromesxs">Chrome Canary</a>,

or <a href="http://nightly.mozilla.org/">Firefox Nightly</a>

Status: <span id="fsstatus"></span>

</div>
<input id="fsbutton" type="button" value="Go Fullscreen" />

<a href="http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/">Back to article</a>

</div>
<script type="text/javascript">// <![CDATA[
/*
Native FullScreen JavaScript API
-------------
Assumes Mozilla naming conventions instead of W3C for now
*/

(function() {
var
fullScreenApi = {
supportsFullScreen: false,
isFullScreen: function() { return false; },
requestFullScreen: function() {},
cancelFullScreen: function() {},
fullScreenEventName: '
',
prefix: '
'
},
browserPrefixes = '
webkit moz o ms khtml'.split(' ');

// check for native support
if (typeof document.cancelFullScreen != '
undefined') {
fullScreenApi.supportsFullScreen = true;
} else {
// check for fullscreen support by vendor prefix
for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
fullScreenApi.prefix = browserPrefixes[i];

if (typeof document[fullScreenApi.prefix + '
CancelFullScreen' ] != 'undefined' ) {
fullScreenApi.supportsFullScreen = true;

break;
}
}
}

// update methods to do something useful
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.fullScreenEventName = fullScreenApi.prefix + '
fullscreenchange';

fullScreenApi.isFullScreen = function() {
switch (this.prefix) {
case '
':
return document.fullScreen;
case '
webkit':
return document.webkitIsFullScreen;
default:
return document[this.prefix + '
FullScreen'];
}
}
fullScreenApi.requestFullScreen = function(el) {
return (this.prefix === '
') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
}
fullScreenApi.cancelFullScreen = function(el) {
return (this.prefix === '
') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
}
}

// jQuery plugin
if (typeof jQuery != '
undefined') {
jQuery.fn.requestFullScreen = function() {

return this.each(function() {
var el = jQuery(this);
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.requestFullScreen(el);
}
});
};
}

// export api
window.fullScreenApi = fullScreenApi;
})();
// ]]></script>

<script type="text/javascript">// <![CDATA[
// do something interesting with fullscreen support
var fsButton = document.getElementById('
fsbutton'),
fsElement = document.getElementById('
specialstuff'),
fsStatus = document.getElementById('
fsstatus');
if (window.fullScreenApi.supportsFullScreen) {
fsStatus.innerHTML = '
YES: Your browser supports FullScreen';
fsStatus.className = '
fullScreenSupported';

// handle button click
fsButton.addEventListener('
click', function() {
window.fullScreenApi.requestFullScreen(fsElement);
}, true);

fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
if (fullScreenApi.isFullScreen()) {
fsStatus.innerHTML = '
Whoa, you went fullscreen';
} else {
fsStatus.innerHTML = '
Back to normal';
}
}, true);

} else {
fsStatus.innerHTML = '
SORRY: Your browser does not support FullScreen';
}
// ]]></script>

<script type="text/javascript">// <![CDATA[
var _gaq = _gaq || [];
_gaq.push(['
_setAccount','UA-3734687-9']);
_gaq.push(['
_trackPageview'],['_trackPageLoadTime']);
(function() {
var ga = document.createElement('
script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('
https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
// ]]></script>

<script type="text/javascript">// <![CDATA[
var clicky = { log: function(){ return; }, goal: function(){ return; }};
var clicky_site_id = 117587;
(function() {
var s = document.createElement('script');
s.type = 'text/javascript'; s.async = true;
s.src = '//static.getclicky.com/js';
( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
})();
// ]]></script>

不过得提醒一下,这是基于html5的,如果您的浏览器不支持html5的话,拜托您还是歇歇吧。
另外,值得一提的是jquery插件的主页上出现了一个全屏视频的API,值得关注哦。

全屏在线演示:http://johndyer.name/lab/fullscreenapi/

jquery插件主页-视频全屏:http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

介绍HTML5中的全屏API:http://jackyrong.iteye.com/blog/1452281

HTML5 全屏 API:http://sofish.de/1959

转载请注明:迷路的老鼠 » 浏览器全屏js,兼容google Chrome

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址