iframe アダプティブおよびフルスクリーンをサポート iframe_html/css_WEB-ITnose

iframe レスポンシブおよび全画面 iframe をサポート (iframe 自适应、并全画面 iframe をサポート)

###################### #############################################

1.jquery iframe リサイズを使用します（コンテンツが変更されると iframe のサイズが自動変更されます）

などのフルスクリーン iframe

2.user jquery フルスクリーン プラグイン

ここで、問題はiframe リサイザーは、iframe のスクロール = "no" を設定するため、全画面表示では、コンテンツが 1 画面を超える場合、スクロール バーは表示されません。

したがって、$(iframe).fullscreen() を呼び出す前に、iframe.scrolling="auto" を設定してください。

3.全画面表示を終了するときは、scrolling="no" を設定する必要があります。そうしないと、応答は続行されますが、スクロール バーのせいで見苦しくなります。

したがって、全画面状態を検出し、全画面を終了すると、iframe のスクロール属性を「no」に設定します。

iframe のコンテナ ページにコンテンツを次のように書きます:

/*

* フルスクリーン状態を検出します。フルスクリーンではない場合は、iframe.scrolling="no" を設定するだけです。

*/

function onFullscreenchange(e) {

// モードが変更されました。

console.log("onFullscreenchange");

/**

* Internet Explorer 11 より前 実装されていません

IE11 msFullscreenElement

Microsoft Edge 以降 fullscreenElement

        */

if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement||document.fullscreenElement)

{

/* 終了時にコードを実行します */

}else{//フルスクリーンを終了し、現在の iframe スクロールを設定 = いいえ

if(lastFullScreenIframe!=null && lastFullScreenIframe!=未定義)

{

lastFullScreenIframe[0].scrolling="no";//全画面モードではいいえ、スクロールをいいえに設定します

}

}

}

jQuery(document).ready(function() {

document.addEventListener("fullscreenchange", onFullscreenchange, false);

document.addEventListener ("webkitfullscreenchange", onFullscreenchange, false);

document.addEventListener("mozfullscreenchange", onFullscreenchange, false);

document.addEventListener("MSFullscreenChange", onFullscreenchange, false);//ie 11

});

楽しんでください。何か問題があれば、xiaohelong2005@gmail.com までメールしてください

############################ # ########################################

には以下が含まれます中国語:

iframe リサイザー プラグイン: https://github.com/davidjbradshaw/iframe-resizer

jquery フルスクリーン プラグイン: https://github.com/kayahr/jquery-fullscreen-plugin

自作フルスクリーンイベント検出機能など

処理内容:

1. iframe Reiserメソッドに従って実装します。 (新しい iframe が追加されるたびに、初期化関数を 1 回呼び出す必要があることに注意してください)

2. jquery fullpage を使用して iframe の全画面を実現します (iframe オブジェクトを取得し、fullpage を呼び出します) )

3. 非全画面モードでは正常に動作しますが、全画面モードではコンテンツが多い場合、スクロール バーが表示されません。

解決策は次のとおりです。

$(iframe).fullpage() を呼び出す前に、iframe.scrolling="auto" を設定し、lastFullScreenIframe を使用して最新の iframe を記録します (複数のタブ)

全画面モードでのスクロール バーの問題は解決されましたが、非全画面モードではスクロール = "no" をオフにする必要があります。解決策は次のとおりです。

全画面イベントを監視し、全画面を終了するときに iframe.scrolling="no" を設定します。

iframe の親フレームに次の関数を追加します。

/*

* フルスクリーン状態を検出します。フルスクリーンでない場合は、iframe.scrolling="no" を設定するだけです。 > */

function onFullscreenchange(e) {

// モードが変更されました。

console.log("onFullscreenchange"); *

* Internet Explorer 11 より前 実装されていません

IE11 msFullscreenElement

Microsoft Edge 以降 fullscreenElement

        * /

if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement||document.fullscreenElement)

{

/* コードを実行終了時 */

}else{// フルスクリーンを終了し、現在の iframe スクロール = no に設定します

if(lastFullScreenIframe!=null && lastFullScreenIframe!=unknown)

{

lastFullScreenIframe[0].scrolling="no";//全画面モードではいいえ、スクロールしないように設定します

}

}

}

jQuery( document).ready(function() {

document.addEventListener("fullscreenchange", onFullscreenchange, false);

document.addEventListener("webkitfullscreenchange", onFullscreenchange, false) );

document.addEventListener("mozfullscreenchange", onFullscreenchange, false);

document.addEventListener("MSFullscreenChange", onFullscreenchange, false);//ie 11

});