従来の iframe アダプティブ高さが再登場_html/css_WEB-ITnose

iframe の高さの調整

iframe の高さの調整は非常に古いトピックです。 html5ではframeフレームは廃止されましたが、iframeタグはまだ存在します。 Frame と iframe の違いを理解していない学生がいる場合は、私の以前の記事「HTML フレームワークの iframe、frame、および Frameset の関連属性の概要」を読んでください。

iframe がプロジェクトに使用されることは現在ほとんどありませんが、一部のプロジェクトでは依然として iframe を最後の手段として使用しています。最近、iframe が使用されているケースに遭遇しました。

基本的なケースは次のとおりです。モバイル ブラウザは PDF のプレビューにあまり優れていないため、携帯電話の PDF プレビューを HTML プレビューに変更します。 PDFはhtmlから生成されるので。 PDF と同様の効果を得るには、10 ページの PDF を 10 の HTML で表示する必要があります。これらの HTML ページをプレビューするには、ページ内で複数の iframe を使用するしかありませんでした。

問題: これらの iframe は適応性が高く、PDF を見ているかのように見える必要があります。そこで、iframe 適応高さの話題が再び取り上げられます。

アイデア

1. プレビュー PDF (実際にはプレビュー HTML) の表面にオーバーレイを追加します。 PDF が読み込まれていることを確認する....

2. 各 Iframe ページの高さを取得し、その高さを Iframe に割り当てます。

3. window.onload 時間が終了すると、「PDF をロードしています...」というアニメーションが非表示になります。 [load イベントについてよく分からない学生は読んでください]

4. この時点では Iframe の高さが適応されており、PDF をプレビューしているように見えます。

適応性の高いコード コードは次のとおりです:

<iframe src="test 2.html" width=“100%” height="600" id="iframe1" onload="iFrameHeight('iframe1')" name="iframe1"></iframe><iframe src="test 2.html" id="iframe2" onload="iFrameHeight('iframe2')" name="iframe2"></iframe><iframe src="test 2.html" id="iframe3" onload="iFrameHeight('iframe3')" name="iframe3"></iframe><iframe src="test 2.html" id="iframe4" onload="iFrameHeight('iframe4')" name="iframe4"></iframe></body><script>console.log(document.getElementById("iframe3").contentWindow);function iFrameHeight(id) {var ifm= document.getElementById(id);var subWeb = document.frames ? document.frames[id].document :ifm.contentDocument;if(ifm != null && subWeb != null) {ifm.height = subWeb.body.scrollHeight;}}</script>

テスト 2 について.html はプレビューしたい PDF ページですが、非常に長くなる可能性があります。

注:

1. 上記のコードは、localhost

2.html などのサーバー環境でプレビューする必要があります。 iframe は同じである必要があります。ドメインの下

コードの説明

document.getElementById("iframe3").contentWindow  可以获取iframe的window对象。

Google Chrome は、

document.frames[id].document 获取document对象

Firefox、および IE8 または上記は

document.getElementById(id).contentDocument 来获取document对象。

document.body.scrollHeight と特定の div のscrollHeight、およびさまざまな幅と高さの詳細については、js/jquery の私の理解と応用を読むことができます。昨年 MOOC で録画したビデオですが、まだ公開される予定です... (MOOC は起動が遅すぎます)。

その他の説明

iframe を操作する方法は実はたくさんあります。たとえば、jquery には、iframe 内の ID または特定のコンテンツを検索できる content() メソッドがあります。

例:

$("#iframe2").contents().find("someID").html()  或者 $("#mainiframe").contains().find("someID").text()

iframe2 には ID が含まれます。

jsとjqueryを併用することもできます！例:

$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

iframe1 内のすべての無線が選択されるように設定します。

概要

これは、このプロジェクトで使用されている iframe についての概要です。いくつか不完全な点があります。

ところで、iframe などを使ってフレーム間攻撃を行う人もいます。以前 http://www.haorooms.com/post/liulanq_think_ie でクロスフレームに関する記事を書きました。iframe を使用する場合は、脆弱性が発生しないように注意してください。

元のアドレス: http://www.haorooms.com/post/ifame_height_zishiying

元の記事、転送元を示してください: haorooms フロントエンド ブログ http://www. haorooms.com/