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

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

WBOY
リリース: 2016-05-16 16:37:04
オリジナル
1281 人が閲覧しました

アプリケーションのシナリオは次のとおりです。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> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> 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">
;
a
c
d



D
;


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート