iframeウィンドウ高さ適応実装方法

著者：Eve Cole 更新時間：2025-02-22 14:16:01

domaina index.htmlには、domainbのページにiframeを介して他の.htmlでネストされているページがあります

他の.htmlページがiframeに表示され、ページの内容が動的に増加または減少するため、iframeローリングバーを削除する必要があります

JavaScriptの相同戦略の制限により、クロスドメイン操作は実行できないため、問題がより困難になります

インターネットアプローチを参照して、代理店のページまたはdomainaに属するagent.htmlを紹介します

次に、domainbの他の.htmlで、ネストされたagent.htmlにiframeを使用してネストされたagent.htmlを使用します

さて、これは今そうです：

index.htmlは、Nested other.htmlを使用します

その他。htmlは、iframe nesting agent.htmlを使用します

3番目のページagent.htmlを導入する理由は、「均一な戦略」のルールを遵守し、異なるドメインの下でパラメーターの転送を完了するためです！

私たちの究極の目的は、麺棒を削除し、埋め込みページのすべての内容が表示されるようにすることです

1。他の.htmlページの実際の高度の実際の高さ

2。埋め込まれたiframeのSRCプロパティに高さを設定します

3。agent.htmlのiframeのsrc属性の高さの値を取り付けます

次の例では、setInterval（）を使用してiframeの高さを常に設定しないように手法を使用しています

この方法は、IFrameのSRCにタイムスタンプを追加し、ブラウザが毎回Agent.htmlをリロードできるようにすることです。

次に、agent.hml invokemethodintopwindow（）のJS機能を実行します

ドメーナの2 HTML

index.html

次のようにコードコードをコピーします。

＃{extends 'main.html' /}

＃{タイトルの設定： 'home' /}

<hr>

<div style = "color：red; font-weight：bold">窗口自适应---绕开同源策略的限制、同时又利用同源策略、去掉iframe的滚动条、动态调整窗口的高度、让ネストされたページのすべての内容を表示できます</div>

<！ - iframe->の高さを動的に調整する必要があります

</div>

function sezize（height）{

// alert（ "resize"）;

document.getElementsByname（ "domainb"）[0] .height = height;

}

</script>

agent.html

次のようにコードコードをコピーします。

<！doctype html>

<html>

<head>

<メタcharset = "utf-8">

<Title>タイトルを挿入して</title>

</head>

<body>

私はプロキシページです！

window.onload = invokemethodintopwindow;

関数invokemethodintopwindow（）{）{

// alert（ "同じドメインで関数を呼び出し、iframeの高さをリセットする"）;

var domain = document.parentwindow;

var realheight = domaina.location.hash.split（ "＃"）[1];

//最終ステップ：上層ウィンドウの関数を呼び出して、iframeの高さをリセットします

parent.parent.resize（realheight）;

// alert（ "realheight："+realheight）;

// alert（document.parentwindow.name）; //コンテナがdomainaにある場所でウィンドウの名前を取得します

// error：// alert（document.parentwindow.parent.name）;

// alert（document.parentwindow.parent.parent.name）; //ウィンドウの最上層はdomainaに属しているので、アクセスできます

}

//異なるタイムスタンプを使用してiframeのSRC属性を設定した後、setinterval（）を使用する必要はありません

// setInterval（ "InvokemethodintopWindow（）"、100）;

</script>

</body>

</html>

other.html in domainb

次のようにコードコードをコピーします。

<！doctype html>

<html>

<head>

<メタcharset = "utf-8">

<Title>タイトルを挿入して</title>

</head>

<！ - ドメインに埋め込まれたページ

<ボタンタイプ= "button" onclick = "btnclick（）"> switch display </button>

JavaScriptには、「同種ポリシー」と呼ばれる非常に重要なセキュリティ制限があります。

この戦略により、JavaScriptコードがアクセスできるページのコンテンツに重要な制限がありました。つまり、JavaScriptは同じドメインにドキュメントを含むドキュメントのコンテンツのみにアクセスできます。