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

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 の問題の概要

推薦する

jQueryはキャンバスタグを使用して検証コードを描画します

<canvas> 要素は、クライアント側のベクター グラフィックス用に設計されています。...

docker inspect コマンドの使用に関するヒント

説明と紹介Docker inspect は Docker クライアントのネイティブ コマンドであり、...

JavaScriptでポインターの位置を取得する方法を教えます

JavaScript でポインターの位置を取得する方法は、イベント オブジェクトの pageX と ...

Dockerデータボリューム操作の実装

データボリュームの使用開始先ほどのケースでは、ホストからコンテナにデータをコピーする必要がある場合、...

MySQL グループ化クエリと集計関数

概要私たちは、双十一に天猫で化粧品を購入する人の平均支出額を知りたい(商品の価格帯を見つけるのに役立...

ウェブ上の模倣と盗作に関する議論

2005年に業界に入ってから数か月後、労働者の日休みの期間中、1か月以上毎日12時まで残業をしました...

MySQL でスロークエリログ機能を有効にする方法

MySQL スロー クエリ ログは、問題のあるクエリを追跡するのに非常に役立ちます。現在のプログラム...

MySQL インデックス失敗の原理

目次1. インデックス失敗の理由2. インデックスの秩序が崩れる状況を見てみましょう。 - インデッ...

Nginxの書き換えモジュールの詳細な説明

書き換えモジュールは ngx_http_rewrite_module モジュールです。その主な機能は...

JavaScript における継承の 3 つの方法

継承する1. 継承とは何か継承: まず、継承とは関係、つまりクラス間の関係です。JS にはクラスはあ...

Mysql 日付クエリの詳細な紹介

現在の日付を照会する CURRENT_DATE() を選択します。 CURDATE() を選択する;...

MySQL の接続数が多すぎるエラーの原因と解決策

目次概要本日正午、開発およびテスト環境の MySQL サービスで接続数が多すぎるというエラーが報告さ...

Dockerを使用してSpringBootプロジェクトをデプロイする方法

Docker テクノロジの開発により、マイクロサービスの実装にさらに便利な環境が提供されます。Doc...

XshellがvirtualBox仮想マシンに接続できない問題の解決策

まず、VirtualBox仮想マシンのネットワーク設定モードについて説明します。NAT+ホストオンリ...