ホームページ ウェブフロントエンド htmlチュートリアル Cross-domain_html/css_WEB-ITnose での iframe 適応高さ

Cross-domain_html/css_WEB-ITnose での iframe 適応高さ

Jun 24, 2016 am 11:28 AM

最近私はある要件に取り組んでいます。その要件の一般的な背景は次のとおりです: ページ内の iframe が他社のリスト ページに埋め込まれています

ブロガーの最初の反応は「とても簡単です!」です。コードの入力を開始してください

その結果、iframe がクロスドメインであり、埋め込まれたページの高さを取得できませんでした。そのため、表示される上下のスクロール バーは非常に醜いものでした。

それで私は偉大なマスターを探しにネットに行きました。ついに見つけました。言葉では言い表せないほど興奮しています。

物語の背景が説明されました。 /*********************************ゴージャスな分割線、笑*************** *** ************/

巨匠の例は大まかに次のようなものです:

www.a.com の下のページ a.html に www.b.com の下のページ c.html が含まれているとします。

www.a.com の下にある別のページ Agent.html をプロキシとして使用し、これを通じて iframe ページの高さを取得し、iframe 要素の高さを設定します

a.html には iframe:

1 <iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>
ログイン後にコピー

が含まれています次のコードを c.html に追加します:

1 <iframe id="c_iframe"  height="0" width="0"  src="http://www.a.com/agent.html" style="display:none" ></iframe>2 <script type="text/javascript">3 (function autoHeight(){4 var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);5 var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);6 var c_iframe = document.getElementById("c_iframe");7 c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height;  // 这里通过hash传递b.htm的宽高8 })();9 </script>
ログイン後にコピー

最後に、agent.html に js を追加します:

 1 <script type="text/javascript"> 2 var b_iframe = window.parent.parent.document.getElementById("Iframe"); 3 var hash_url = window.location.hash; 4 if(hash_url.indexOf("#")>=0){ 5 var hash_width = hash_url.split("#")[1].split("|")[0]+"px"; 6 var hash_height = hash_url.split("#")[1].split("|")[1]+"px"; 7 b_iframe.style.width = hash_width; 8 b_iframe.style.height = hash_height; 9 }10 </script>
ログイン後にコピー

agent.html は URL から幅と高さの値を取得し、高さを設定します。 iframe の幅 (agent.html は www.a.com 配下にあるため、a.html を操作する際の JavaScript 同一オリジン制限はありません)

記事参照: フロントエンド開発ブログ

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

WebページのPNG画像にストローク効果を効率的に追加する方法は?

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか?

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

< meter>の目的は何ですか 要素?

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

< datalist>の目的は何ですか 要素?

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素?

See all articles