jQuery を使用して、iframe 下の無効なページアンカーポイントの問題を修正する

適用シナリオ: iframe ページにスクロールバーがなく、親ウィンドウにスクロールバーが表示され、アンカーマークが無効になります。これは、アンカーが現在のウィンドウのスクロールバーに基づいてウィンドウをスクロールするためです。子ウィンドウになった後は、スクロールバーがなくなり、自然にスクロールしなくなります。

解決策は、js を使用してページがネストされているかどうかを判断し、js を使用して親ウィンドウ内の iframe の位置と firame 内のアンカーポイントの位置を計算し、その 2 つの合計が親ウィンドウのスクロールになるというものです。

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

コード：

親フォームページ index.html

コードをコピー

コードは次のとおりです。

<!doctypehtml>
<html>
<ヘッド>
<タイトル></タイトル>
<スタイルタイプ="text/css">
*{
マージン: 0;
パディング: 0;
境界線: 0;
}
html,
体{
幅: 100%;
高さ: 100%;
}
</スタイル>
</head>
<本文>
<div スタイル="幅:100%;背景:#f00;高さ:500px;"></div>
<a href="">dd</a>
<a href="">ddd</a>
<iframe name="iframe2" id="iframe2" src="iframe.html?a=b&c=d" style="width:100%;height:2060px;"></iframe>
<iframe name="iframe2" id="iframe2" src="iframe.html?a=d&c=b" style="width:100%;height:2060px;"></iframe>
</本文>
</html>

サブフォームページ iframe.html

コードをコピー

コードは次のとおりです。

<!doctypehtml>
<html>
<ヘッド>
<タイトル></タイトル>
<スタイルタイプ="text/css">
{
パディング: 5px;
境界線: 1px 実線 #f00;
フロート: 左;
表示: ブロック;
右マージン: 5px;
}
div{
幅: 80%;
マージン: 10px 自動;
高さ: 500px;
境界線: 1px 実線 #f00;
フォントサイズ: 30px;
}
</スタイル>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(関数(){
//iframeの場合はjsにドメイン制限があるためネットワーク上でアクセスする必要がある
//iframeがない場合には処理は行われません。
if(window!==window.top){
// 上部のウィンドウの iframe を取得します。ネストされた iframe が多すぎる場合は、自分で変更してください。
var iframeList=window.top.document.getElementsByTagName('iframe');
for(var i=0;i<iframeList.length;i++){
//ループ内で現在のウィンドウが iframe であるかどうかを判定します
if(window.location.toString().indexOf(iframeList[i].getAttribute('src').toString())!=-1){
//iframeが読み込まれるのを待ち、アンカーポイントにイベントを追加します。
window.top.document.getElementsByTagName('iframe')[i].onload=function(){
//iframeと親ウィンドウの上端の間の距離を決定する
var top = window.top.document.getElementsByTagName('iframe')[i].offsetTop;
$('a').each(関数(){
var href = $(this).attr('href');
if(href.indexOf('#')!=-1){//リンクではなくアンカーポイントであるかどうかを判断します
var name = href.substring(href.indexOf('#')+1);
$(this).bind('click',function(){
$('a').each(関数(){
if($(this).attr('name')==name){
// 親ウィンドウのスクロール
$(window.parent).scrollTop($(this).offset().top+top);
}
});
});
}
});
}
}
}
}
});
</スクリプト>
</head>
<本文>
<a href="#a">は</a>
<a href="#b">b</a>
<a href="#c">c</a>
<a href="#d">d</a>
<div><a href="" name="a">あ</a></div>
<div><a href="" name="b">B</a></div>
<div><a href="" name="c">C</a></div>
<div><a href="" name="d">D</a></div>
</本文>
</html>

<<: WeChat アプレットのシンプルなログインページの実装 (ソースコード付き)

>>: MySQL インデックス障害の上位 10 の問題の概要