検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >jquery を使用して iframe_HTML/Xhtml_Web ページ制作時のページ アンカーの失敗問題を修復する

jquery を使用して iframe_HTML/Xhtml_Web ページ制作時のページ アンカーの失敗問題を修復する

WBOY
WBOYオリジナル
2016-05-16 16:37:041268ブラウズ

アプリケーションのシナリオは次のとおりです。iframe ページにはスクロール バーがありません。親フォームにスクロール バーが表示されると、アンカー ポイントは現在のウィンドウのスクロール バーに基づいてウィンドウをスクロールするため、アンカー マークは無効になります。子フォームではスクロールバーがありませんので、当然スクロールしません。

解決策は、js を使用してページがネストされているかどうかを判断し、js を使用して親フォーム内の iframe の位置とフレーム内のアンカー ポイントの位置を計算し、その 2 つを加算すると次のようになります。親フォームのスクロール。

問題が発生しました: 親フォーム要素を取得します (ドメイン制限のため、すべてがネットワーク環境 (つまり http://domain.com) 内にある必要があります)。親フォームが複数の iframe をネストしているかどうかを判断します。それは現在の iframe ページです。

コード:

親フォーム ページのindex.html

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



</title< ;style type="text/css"> <br>*{ <br>マージン: 0; <br>ボーダー: 0; <br>html, <br>ボディ{ <br> 幅: 100%; <br> 高さ: 100%; <br> </head> style= "width:100%;background:#f00;height:500px;"></div> <br><a href="">dd</a> <br><a href= "" >ddd</a> <br><iframe name="iframe2" id="iframe2" src="iframe.html?a=b&c=d" style="width:100%;height:2060px; "> ;</iframe> <br><iframe name="iframe2" id="iframe2" src="iframe.html?a=d&c=b" style="width:100%;height:2060px;" > </iframe> <br></html> <br><br><br>サブフォーム ページ iframe.html <br><br><br><br><br>コードをコピーします<br><br> </div>コードは次のとおりです:<br><br> <br><!doctype html> <div class="msgheader"><html> ; <div class="right"><title> ="jquery -1.8.2.min.js">