Question

最近我在以色列网站上偶然发现了一个新品牌的弹出窗口。一旦我点击文章并弹出窗口 - 浏览器就会进入全屏模式。他们是如何实现这一目标的？

您可以通过以下方式重现：

在Mac OS X上使用Chrome
转到此页面：http://www.haaretz.co.il/news/politi/.premium-1.2145182
单击文章文本一次或两次，直到弹出窗口打开。

谢谢，

Answer 1

可以使用HTML5 Fullscreen API将浏览器窗口设置为全屏。我不确定你提到的网站是否使用这种方法。

这还不是标准，因此需要供应商前缀。您可以在CANIUSE查看浏览器支持级别，HTML5 Rocks有一个简短的教程Fullscreen API.

编辑：使用代码更新了答案。

我怀疑，该网站使用HTML5全屏API。请参阅 which_popup.php

页面上的以下代码

function popup_(url, isOnClick) {

var is_popup_activated_domain = getCookieA('haaretz');
if (is_popup_activated_domain == "" && the_cookie == "") {
    if (isOnClick) {
        setCookieA('haaretz', 'yes', 14400);
        the_cookie = 'yes';
    }

    var chrome_full = false;
    if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        chrome_full = true;
    }

    //....
    if (chrome_full) {
        document.webkitCancelFullScreen();
    }
}
}

它基本上会侦听文本上的click事件，将浏览器设置为全屏，然后打开弹出窗口，弹出窗口也会进入全屏模式。您需要的api方法是 webkitRequestFullscreen 以启用全屏模式， webkitCancelFullScreen 退出全屏模式。

Answer 2

此链接可能对您有帮助..

http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

// mozilla proposal
element.requestFullScreen();
document.cancelFullScreen(); 

// Webkit (works in Safari and Chrome Canary)
element.webkitRequestFullScreen(); 
document.webkitCancelFullScreen(); 

// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen(); 

// W3C Proposal
element.requestFullscreen();
document.exitFullscreen();

尝试这些..

void webkitRequestFullScreen();
void webkitRequestFullScreenWithKeys();
void webkitCancelFullScreen();

Chrome在版本4.0.245.0中实现了“Kiosk模式”。实际上，这是一种在全屏模式下启动浏览器并禁用地址栏和状态栏的方法。某些键盘快捷键（例如全屏）也被禁用。

在Windows上：chrome.exe -kiosk http://yoursite.com/file.html

其他一切：铬浏览器--kiosk http://yoursite.com/file.html

在Mac OS X上全屏自动打开Chrome

2 个答案: