適用シナリオ: 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 の問題の概要
<canvas> 要素は、クライアント側のベクター グラフィックス用に設計されています。...
説明と紹介Docker inspect は Docker クライアントのネイティブ コマンドであり、...
JavaScript でポインターの位置を取得する方法は、イベント オブジェクトの pageX と ...
MySQL データベースのバージョンを 5.6.28 から 8.0.11 にアップグレード中にプロジ...
データボリュームの使用開始先ほどのケースでは、ホストからコンテナにデータをコピーする必要がある場合、...
概要私たちは、双十一に天猫で化粧品を購入する人の平均支出額を知りたい(商品の価格帯を見つけるのに役立...
2005年に業界に入ってから数か月後、労働者の日休みの期間中、1か月以上毎日12時まで残業をしました...
MySQL スロー クエリ ログは、問題のあるクエリを追跡するのに非常に役立ちます。現在のプログラム...
目次1. インデックス失敗の理由2. インデックスの秩序が崩れる状況を見てみましょう。 - インデッ...
書き換えモジュールは ngx_http_rewrite_module モジュールです。その主な機能は...
継承する1. 継承とは何か継承: まず、継承とは関係、つまりクラス間の関係です。JS にはクラスはあ...
現在の日付を照会する CURRENT_DATE() を選択します。 CURDATE() を選択する;...
目次概要本日正午、開発およびテスト環境の MySQL サービスで接続数が多すぎるというエラーが報告さ...
Docker テクノロジの開発により、マイクロサービスの実装にさらに便利な環境が提供されます。Doc...
まず、VirtualBox仮想マシンのネットワーク設定モードについて説明します。NAT+ホストオンリ...