4

iFrame を使用して、求人応募フォームを別のページに取り込んでいます。ユーザーが送信を押したときにページにエラーがある場合、オーバーレイ ボックスが表示され (ライトボックスのように)、検証エラー メッセージがユーザーに表示されます。ウィンドウを閉じる「OK」ボタンがあります。

iFrame の高さは約 1000px であるため、ボタンをクリックしてユーザーをページの上部に戻したいと考えています。繰り返しますが、これはすべて iFrame 内で行われます。iFrame のポップアップにより、iFrame の上部にアンカーが表示されます。ここでは、クロスドメインの狂気は起こっていません。

ボタンに関連付けられたクリック機能が既にあるので、jquery でこれを行うことをお勧めしますが、昔ながらの Javascript DOM メソッドを絶対に使用する必要がある場合は、解決します。

scrollTo、animate、アンカーを iFrame の src に追加しようとしましたが、何も機能しませんでした。また、私を導くためのエラーも発生していません。どんな助けでも大歓迎です！

アップデート

if(errors > 0) {
    var header = "It appears there was a problem!";
    var message = "There are <b><u>"+errors+"</u></b> errors with your application.<br/><br/>";
        message += "<b>Please re-attach your resume once you have corrected the errors.</b>";

    jQuery("#infoMessage .infoText").html("<h2>"+header+"</h2><p>"+message+"</p>");
    jQuery("#infoMessage button").button();

    jQuery("button.okButton").click(function() {
        jQuery("#infoMessage").fadeOut();
        jQuery(".light_overlay").fadeOut();
        return false;

        //alert('testing');
        // Do not use .scrollTop() as it is deprecated.
        jQuery('body').prop('scrollTop', 0);
        // Additionaly, animate it.
        jQuery('body').animate({ scrollTop: 0 });

    });

    jQuery("#infoMessage").fadeIn('slow');
    jQuery(".light_overlay").fadeIn();

}

これは、追加するよう提案された最後のコード スニペットであり、機能しませんでした (コメント アウトされたアラートの 4 行後)

4

2 に答える 2

0

jQuery を使用していると仮定すると、覚えておくべきことがまだありますが、従来の JavaScript ほどではありません。

  1. スクロールするときは、ドキュメントの代わりに「本文」を使用します。
  2. prop() を使用して scrollTop を設定します
  3. アンカーでクリック イベントを処理している場合は、常に event.preventDefault() を呼び出します。

サンプルコード:

// Do not use .scrollTop() as it is deprecated.
$('body').prop('scrollTop', 0);

// Additionaly, animate it.
$('body').animate({ scrollTop: 0 });
于 2012-11-01T18:48:12.670 に答える
0

<iframe>を aでラップし、<div>絶対位置を使用するだけでなく、上と左を 0 に設定することもできます。これにより、必要なiframe場所に移動したり、スクロール位置をプログラムで設定したりできます。

以下に例を示します: http://jsfiddle.net/BDC9Q/35/

于 2012-11-01T19:05:35.500 に答える