iframe適応高さ_Experience交換の各種方法まとめ-CSSチュートリアル-php.cn

iframe適応高さ_Experience交換の各種方法まとめ

WBOY

リリース： 2016-05-16 12:04:39

オリジナル

2261 人が閲覧しました

枠線のない iframe は Web ページとシームレスに統合できるため、ページを更新せずにページの一部のデータを更新することができますが、iframe のサイズはレイヤーほど「拡張性」がないため、問題が発生します。使用中です。問題が発生しました。iframe の高さを設定するとき、多すぎるのは良くありません。それより少ないとさらに良くありません。ここで、iframe の高さを動的に調整する方法、主に次の JS 関数を説明します:
まずはこの方法コードがシンプルで互換性も問題ないので、まずはテストしてみても良いでしょう。

コードをコピーコードは次のとおりです。

 
function SetWinHeight(obj) ) 
{ 
var win=obj; 
if (document.getElementById) 
{ 
if (win && !window.opera) 
{ 
if (win.contentDocument) && win.contentDocument.body.offsetHeight) 
win.height = win.contentDocument.body.offsetHeight; 
else if(win.Document && win.Document.body.scrollHeight) 
win.height = win .Document.body.scrollHeight; 
} 
} 
} 

最後に、iframe を追加するときに、onload 属性を失うことはできません。もちろん、id も必要です。関数内の match win
>

コードをコピーしますコードは次のとおりです:

div>
この種のコードは上記のソリューションに似ています
古典的なコード iFrame 適応高さは IE6/IE7/IE8 のテストに合格しています。 /Firefox/Opera/Chrome/Safari。
HTML コード:

コードをコピーコードは次のとおりです。

iframe>JavaScript コード:

次のコードの方が互換性があります

コードをコピーコードは次のとおりです:

別の iframe ソリューション (非常にシンプル)
重要なヒント: src= に入力する必要がある Web アドレスは、このページと同じサイトにある必要があります。そうでない場合は、エラーが発生し、「アクセスが拒否されました!」と言われます (実際には、これは Js のクロスドメインの問題によりアクセスが拒否されました)
私は以前にこの問題に遭遇したことがあります。答えを得るためにオンラインで検索したところ、多くの人も同じように遭遇していることがわかりました。この問題は解決策を共有します。
1.bottom.js ファイルを作成し、次のコード (2 行のみ) を入力します。

コードをコピーコードは次のとおりです:

 
parent.document.all("フレームID名").style.height=document. body.scrollHeight; 
parent.document.all("フレーム ID 名").style.width=document.body.scrollWidth; 

ここでのフレーム ID 名は Iframe の ID です。例:

コードをコピーコードは次のとおりです。

2. Web サイトに含まれるすべてのファイルを提供します。

を追加します。コードをコピーコードは次のとおりです:

div >
3. はい、もう終わりにしましょう。
WINXP および IE6 でのテストに合格しました。とても簡単です！
iframe の適応型高さを実装します。
iframe の適応型高さを実装します。これは、ページと iframe に同時にスクロールバーが表示される現象を回避するために、ページの長さに自動的に適応できます。

コードをコピーコードは次のとおりです:

3 番目の方法はバッチ iframe 適応です:
仕事中、iframe に含まれるコンテンツに応じて iframe の高さが適応されるという問題に遭遇しました。インターネット上で同様の問題に対する解決策を見てきました。検索した結果、ブラウザと互換性のある比較的完全なソリューションを見つけたので、自分で記述する必要はありません。
自分で記述する必要はありませんが、この考え方は理解しておく必要があります。基本的には、iframe 属性 src で指定されたドキュメント内のコンテンツの高さを取得し、それを使用して、 iframe 自体の高さ。iframe が配置されているページが読み込まれると、ページの高さが変更されます。高さの調整が必要なすべての iframe が自動的に設定されるため、時間と労力が節約されます。ページ内のすべての iframe が適切であると判断された場合は、アダプティブハイトを必要とする場合は、iframe配列を直接取得してコードに与えるだけで、IDを自分で書く必要もなく、プログラムが完成します。 (コードを投稿します:)

コードをコピーコードは次のとおりです:

インターネット上の誰かが、iframe に含まれるドキュメントの高さが動的に変化する場合に iframe の高さを自動的に調整する問題を解決する方法を改良しました。原理は継続的に行うことです。 iframe に含まれるドキュメントのコンテンツの高さをスキャンし、iframe が配置されているページで変更する iframe 自体の高さこの方法は問題を解決しているように見えますが、影響があるかどうかはわかりませんページの速度とシステムリソースの使用量についてですが、この方法は少し偏執的であると感じており、より良い解決策があるはずです。
既知の iframe ID のみを呼び出す 4 番目のメソッドは推奨されません

コードをコピーコードは次のとおりです。

function iframeAutoFit(iframeObj){ 
 setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document .body .scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200) 
}

使用方法は、調整する必要がある iframe に ID を追加し、それからjsを実行するだけです