1

最近、イスラエルのウェブサイトで新しいブランドのポップアップを見つけました。記事をクリックしてポップアップが開くと、ブラウザーは全画面表示モードに移行します。彼らはどのようにこれを達成しますか?

これは次の方法で再現できます。

  1. Mac OS X で Chrome を使用する

  2. このページにアクセスしてください: http://www.haaretz.co.il/news/politi/.premium-1.2145182

  3. ポップアップが開くまで、記事のテキストを 1 ～ 2 回クリックします。

ありがとう、

4

2 に答える 2

2

HTML5 Fullscreen API を使用して、ブラウザ ウィンドウをフルスクリーンに設定することができます。あなたが言及したウェブサイトがこのアプローチを使用しているかどうかはわかりません。

これはまだ標準ではないため、ベンダー プレフィックスが必要になります。CANIUSEでブラウザー サポートのレベルを確認できます。また、HTML5 Rocks には短いチュートリアルのFullscreen API があります。

編集：コードで回答を更新しました。

予想通り、この Web サイトは HTML5 Fullscreen 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();
    }
}
}

基本的に、テキストのクリックイベントをリッスンし、ブラウザーをフルスクリーンに設定してからポップアップを開くため、ポップアップもフルスクリーンになります。必要な API メソッドは、フルスクリーン モードを有効にするためのwebkitRequestFullscreenと、フルスクリーン モードを終了するためのwebkitCancelFullScreenです。

于 2013-10-21T04:15:33.657 に答える
0

このリンクはあなたに役立つかもしれません..

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 で「キオスク モード」を実装しました。これは基本的に、アドレス バーとステータス バーを無効にしてブラウザーをフルスクリーン モードで起動する方法です。一部のキーボード ショートカット (全画面表示など) も無効になります。

Windows の場合: chrome.exe -kiosk http://yoursite.com/file.html

その他すべて: chromium-browser --kiosk http://yoursite.com/file.html

于 2013-10-25T04:18:40.027 に答える