scribd 是如何实现他们的“全屏”功能的? 模式?
scribd 全屏模式非常简洁(例如: http://www.scribd.com/doc/13161906/Java-Lab-Manual-With-Java-Installation-Guide?classic_ui=1)。 优点(特别是对于 RIA)是它不会(几乎)完全禁用键盘,就像 Flash Player 中的“默认”全屏模式那样。 嵌入时似乎也可以工作。
他们是如何做到的呢?
The scribd fullscreen mode is pretty neat (example: http://www.scribd.com/doc/13161906/Java-Lab-Manual-With-Java-Installation-Guide?classic_ui=1). The advantage (for RIAs specifically) is that it doesn't (almost) completely disable the keyboard the way the 'default' fullscreen mode in Flash Player does. Seems to also work when embedded.
How did they do it?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
该示例根本没有使用全屏。 他们所认为的“全屏”只是最大化 Flash 窗口以占据整个浏览器区域。 浏览器的工具栏、状态栏和镶边以及浏览器之外的任何内容仍然可见。
对于嵌入 HTML 页面中的 Flash/Flex 小部件来说,这是一个很好的效果,但它与全屏不同。
实现主要是在 JavaScript/DOM 方面,只有很少的在 Flash/Flex 方面。 当用户单击“全屏”时,使用ExternalInterface 调用JavaScript 函数。 然后,该 JS 函数需要重新定位 Flash 元素并调整其大小,使其位于 (0,0) 并占据整个屏幕。 如果 HTML 比页面长,那么您还需要隐藏它以使浏览器的滚动条消失,就像 scribd 示例一样。 Flex/Flash 应用程序内的另一个按钮提供了关闭或相关按钮来反转该过程。
作为一名 Flex 开发人员,我反对使用术语“全屏”。 全屏是许多 Flash/Flex 应用程序(尤其是视频播放器)的常见功能。 使用该术语来表示不同的含义会让用户感到困惑。 “最大化”比“全屏”更合适。
That example is not using full screen at all. What they consider "full screen" is simply maximizing the flash window to take up the entire browser area. The browser's toolbars and status bar and chrome are still visible, as well as anything outside the browser.
It's a nice effect for a Flash/Flex widget embedded in an HTML page, but it's not the same as full screen.
Implementation is mostly on the JavaScript/DOM side and only minimally within Flash/Flex. When the user clicks "Full Screen", use ExternalInterface to call out to a JavaScript function. This JS function then needs to reposition and resize the Flash element so that it is at (0,0) and takes up the entire screen. If the HTML is longer than a page, then you also need to hide that to make the browser's scrollbar go away, like the scribd example does. Another button inside the Flex/Flash app provides a close or related button to reverse the process.
As a Flex developer, I object to using the term "Full Screen" for this. Full Screen is a common function of many Flash/Flex apps, particularly video players. It's confusing to users to use the term to mean something different. "Maximize" would be more appropriate than "Full Screen".
如果你问我的话,不太好。 他们的界面在 Ubuntu 上被严重破坏了……这很奇怪,因为 99.9% 的其他 Flash 应用程序都可以完全工作。
Boots XP virtualbox 图像
看起来他们刚刚使用一些 JavaScript 更改了 Flash 所在的 div,并调整了小程序的大小以适应。 再加上另一个 JavaScript 事件挂钩来检测屏幕何时调整大小。
技术上没什么聪明的,但他们做到了很好。
Not very well if you ask me. Their interface is shockingly broken here on Ubuntu... That's quite strange as 99.9% of other Flash apps work completely.
Boots XP virtualbox image
Well it looks like they've just altered the div that the flash sits in with some JavaScript and resized the applet to fit. Plus another JavaScript event hook to detect when the screen is resized.
Nothing technically clever, but it's good they've done it.
实际上,Sam,他们提供了 Flash 全屏可用,但必须在文档对象上将“full_screen_type”选项设置为“flash”:
var scribd_doc = scribd.Document.getDoc(doc_id, access_key);
scribd_doc.addParam('full_screen_type', 'flash');
默认情况下,“full_screen_type”实际上设置为使用 JavaScript 渲染,这会导致仅浏览器窗口的全屏功能。
对于使用 sbrid.js 的任何人来说,有几个注意事项:
Actually Sam, they make a flash fullscreen available, but the 'full_screen_type' option has to be set to 'flash' on the document object:
var scribd_doc = scribd.Document.getDoc(doc_id, access_key);
scribd_doc.addParam('full_screen_type', 'flash');
By default, 'full_screen_type' is actually set to render with javascript, which results in a browser-window-only full-screen feature.
A couple of heads-ups for anyone using sbribd.js: