ホームページ >ウェブフロントエンド >jsチュートリアル >iframeウィンドウ高さ調整の実装方法_javascriptスキル

iframeウィンドウ高さ調整の実装方法_javascriptスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-05-16 17:04:491329ブラウズ

domainA には、index.html ページがあり、domainB には、other.html ページが iframe を介してネストされています。
other.html ページは iframe 内に表示され、そのページのコンテンツは動的に増加します。 iframe のスクロール バーを削除する必要があります
JavaScript の同一オリジン ポリシーの制限により、クロスドメイン操作を実行できないため、問題がさらに難しくなります
オンラインを参照した後実際に、エージェント ページ (agent.html) がドメイン A
に属します。次に、ドメイン B の other.html で iframe を使用して、agent.html

をネストします。

さて、現在の状況は次のようになります。
index.html は iframe を使用して other.html をネストします
other.html は iframe を使用して Agent.html をネストします
3 番目を導入する必要がある理由ページエージェント .html は、「同一オリジンポリシー」のルールに準拠し、異なるドメインでのパラメータの転送を完了する必要があります。

最終的な目標は、スクロール バーを削除し、埋め込まれたページのコンテンツがすべて表示されるようにすることです
1. other.html ページの実際の高さを取得します
2. 高さをその埋め込みに設定します
iframe の src 属性で 3.agent.html

で、それが属する iframe の src 属性の高さの値をインターセプトします。

次の例では、iframe の高さを継続的に設定するための setInterval() の使用を回避するためのトリックが使用されています。
この方法では、ブラウザが iframe を再ロードできるようにタイムスタンプを追加します。 .html
その後、agent.hml の js 関数 invokeMethodInTopWindow() を実行させます
2 html
index.html

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

#{extends 'main.html' / }
#{タイトルを設定:'ホーム' /}

ウィンドウ アダプティブ --- 同一オリジン ポリシーを使用してウィンドウのスクロール バーを削除しながら、同一オリジン ポリシーの制限をバイパスします。 iframe を使用して動的に調整します。ネストされたページのすべてのコンテンツを表示できるようにウィンドウの高さを設定します


< ;div style="text-align :center;">


エージェント.html

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




ここにタイトルを挿入


私はエージェントのページです!


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