JavaScriptウェブページの全画面API
2978 ワード
ほとんどのブラウザにはフルスクリーン表示を実現する機能があり、大部分のブラウザはフルスクリーン表示とフルスクリーン表示を終了するショートカットキーは通常F 11とEscの2つのボタンである.今、W 3 Cはウェブページのフルスクリーン表示に関するAPIを制定しました.このAPIを利用してウェブページのフルスクリーン表示を実現し、特定の要素をフルスクリーン表示に設定することもできます.各ブラウザでの互換性:google chrome 15+、safri 5.1+、firfox 10+、IE 11はすでにフルスクリーンAPIをサポートし始めました.
フルスクリーンに入るとフルスクリーンを終了する方法:
フルスクリーンに入る:element.request Fulscreen()
全画面から退出:Dcument.exitFulscreen()
もちろんW 3 C標準での使用方法ですが、各ブラウザでの使用には違いがあります.
webkitブラウザで:
フルスクリーンに入る:element.webkitRequest Fulscreen()退出フルスクリーン:document.webkit Cancel Freen()
Gecko(Firefox)ブラウザで:
フルスクリーンに入る:element.mozRequest FullScreen()全画面から退出:document.mozCancel Freen()
W 3 Cは全画面APIの基準を定めているが、各ブラウザではこの基準をうまくサポートしていないため、使用に必要な互換性処理を行う必要がある.
互換性パッケージ:
本人は無意識のうちに発見したこのAPIですが、まだ実際にプロジェクトで使用したことがないので、利用提案ができません.そこでここでブログ記事を引用します.httml 5はフルスクリーンのapi方法での使用心得を実現します.
1)safariとchromeの下で、フルスクリーン後の元素は全自動的にフルスクリーンで中央に配置され、背景色は黒に変化します.私はbodyに背景色を設定して背景色を変えてみましたが、失敗しました.firefoxの下で、フルスクリーン後の背景色はフルスクリーンのその元素の背景色で、しかも元素は中央にありません.もしbodyにフルスクリーンを調整するならば、webkitカーネルのブラウザーの下でと11の入るフルスクリーンの効果の差を押すのはとても遠くて、主に背景色の問題で、firefoxの下で効果はf 11フルスクリーンに接近します.
2)フルスクリーンから退出するのは、documentにチューニングすることによってcancel FulScreen方法ですが、ページのすべての要素をフルスクリーンに入れたいなら、documentにrequest Fulchreenを調整することはできません.
3)オンフルスクリーニングイベントのコールバックは、safariにalertを書いてはいけません.alertを書いたら、クリックしたら自動的にフルスクリーンから退出します.
4)f 11を押して入るフルスクリーンで、オンフルスクリーンスクリーンのイベントは応答しません.
5)フルスクリーンに入るには、必ずあるノードをクリックし、直接フルスクリーンのアプリに入れないでください.mouseover、mousemoveなどワンロードに近いイベントもだめです.click、mousedown、mouseupイベントでいいです.戦略はwindow.openと同じであるべきです.
6)iosはフルスクリーンアプリには対応していません.
最後にデモを提供します. http://robnyman.github.io/fullscreen/
おすすめ:http://www.1994july.club/a/
フルスクリーンに入るとフルスクリーンを終了する方法:
フルスクリーンに入る:element.request Fulscreen()
全画面から退出:Dcument.exitFulscreen()
もちろんW 3 C標準での使用方法ですが、各ブラウザでの使用には違いがあります.
webkitブラウザで:
フルスクリーンに入る:element.webkitRequest Fulscreen()退出フルスクリーン:document.webkit Cancel Freen()
Gecko(Firefox)ブラウザで:
フルスクリーンに入る:element.mozRequest FullScreen()全画面から退出:document.mozCancel Freen()
W 3 Cは全画面APIの基準を定めているが、各ブラウザではこの基準をうまくサポートしていないため、使用に必要な互換性処理を行う必要がある.
互換性パッケージ:
//
function rfs() { var de = document.documentElement; if(de.requestFullscreen) { de.requestFullscreen(); } if(de.mozRequestFullScreen) { de.mozRequestFullScreen(); } if(de.webkitRequestFullScreen) { de.webkitRequestFullScreen(); } }; // function efs() { var d = document; if(d.exitFullscreen) { d.exitFullscreen(); } if(d.mozCancelFullScreen) { d.mozCancelFullScreen(); } if(d.webkitCancelFullScreen) { d.webkitCancelFullScreen(); } };本人は無意識のうちに発見したこのAPIですが、まだ実際にプロジェクトで使用したことがないので、利用提案ができません.そこでここでブログ記事を引用します.httml 5はフルスクリーンのapi方法での使用心得を実現します.
1)safariとchromeの下で、フルスクリーン後の元素は全自動的にフルスクリーンで中央に配置され、背景色は黒に変化します.私はbodyに背景色を設定して背景色を変えてみましたが、失敗しました.firefoxの下で、フルスクリーン後の背景色はフルスクリーンのその元素の背景色で、しかも元素は中央にありません.もしbodyにフルスクリーンを調整するならば、webkitカーネルのブラウザーの下でと11の入るフルスクリーンの効果の差を押すのはとても遠くて、主に背景色の問題で、firefoxの下で効果はf 11フルスクリーンに接近します.
2)フルスクリーンから退出するのは、documentにチューニングすることによってcancel FulScreen方法ですが、ページのすべての要素をフルスクリーンに入れたいなら、documentにrequest Fulchreenを調整することはできません.
3)オンフルスクリーニングイベントのコールバックは、safariにalertを書いてはいけません.alertを書いたら、クリックしたら自動的にフルスクリーンから退出します.
4)f 11を押して入るフルスクリーンで、オンフルスクリーンスクリーンのイベントは応答しません.
5)フルスクリーンに入るには、必ずあるノードをクリックし、直接フルスクリーンのアプリに入れないでください.mouseover、mousemoveなどワンロードに近いイベントもだめです.click、mousedown、mouseupイベントでいいです.戦略はwindow.openと同じであるべきです.
6)iosはフルスクリーンアプリには対応していません.
最後にデモを提供します. http://robnyman.github.io/fullscreen/
おすすめ:http://www.1994july.club/a/