iframeウィンドウの高さの適応性を実現する別の巧妙なアイデア

著者：Eve Cole 更新時間：2025-02-23 11:32:01

domainaにページindex.htmlがあり、iframeを介してdomainbのpage other.htmlをネストします

他の.htmlページがiframeに表示され、そのページのコンテンツが動的に増加または減少するため、iframeのスクロールバーを今すぐ削除する必要があります

JavaScriptの同性ポリシーの制限により、クロスドメインの操作は実行できず、問題がより困難になります

私はオンラインプラクティスに言及し、エージェントページ、またはdomainaに属するagent.htmlを導入しました

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

わかりました、今状況は次のとおりです。

index.html nesting other.htmlを使用してiframeを使用します

other.htmlnest agent.htmlを使用してiframeを使用します

3番目のページagent.htmlが「同じオリジンポリシー」のルールを順守し、異なるドメインの下でパラメーターの通過を完了する理由です。

私たちの究極の目標は、Scrollbarを削除し、すべての埋め込みページコンテンツが表示されるようにすることです

1.他の.htmlページの実際の高さを取得します

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

3。agent.htmlで、iframeのSRC属性の高さ値を切り取ります。

次の例では、setinterval（）を使用してiframeの高さを連続的に設定することを避けるためにトリックを使用します。

この方法は、ブラウザが毎回agent.htmlをリロードするように、タイムスタンプをiframeのSRCに添付することです。

次に、agent.hmlのjs関数invokemethodintopwindow（）を実行します

ドメーナの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 domaina = document.ParentWindow;

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

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

parent.parent.resize（realheight）;

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

//alert(document.parentwindow.name);///容器がdomainaにあるウィンドウの名前をget

//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>

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

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

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

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