web-dev-qa-db-ja.com

JQueryとフレーム-$（document）.readyが機能しない

JsとjQueryにいくつかのコードがあるページがあり、非常にうまく機能します。しかし残念ながら、私のサイトはすべて非常に古く、フレームを使用しています。そのため、フレーム内にページを読み込んだときに、$(document).ready()が起動しません。

私のフレームセットは次のようになります：

<frameset rows="79,*" frameBorder="1" frameSpacing="1" bordercolor="#5996BF" noresize> 
    <frame name="header" src="Operations.aspx?main='Info.aspx'" marginwidth="0" marginheight="0" scrolling="no" noresize frameborder="0">
    <frame name="main" src="Info.aspx" marginwidth="0" marginheight="0" scrolling="auto" noresize frameborder="0">      
</frameset>

私のページはmainフレームに読み込まれます。私は何をすべきか？

javascriptjqueryframes
16
matma

私は別のコメントで言及された方法を試しました：

$("#frameName").ready(function() {
    // Write you frame on load javascript code here
} );

そしてそれは私にとってはうまくいきませんでした。

これはしました：

$("#frameName").load( function() {
     //code goes here
} );

イベントはそれほど速くは発生しませんが、画像とcssも読み込まれるまで待機します。

7
jenming

私はこれが古いトピックであることを知っています。しかし、このページにアクセスする人を助けるために、ここに私の解決策があります：

$($("#frameName")[0].contentWindow.document).ready(function() {
    // Write you frame onready code here
});
3
elfan

フレームに対してonloadイベントを発生させる場合は、次の手順に従います。

  1. idとnameを各<frame>タグに割り当てます。 id属性とname属性の両方の値が同じであることを確認してください。

  2. 次のコードを使用して、フレームのonloadイベントを発生させます。

    $("frameName").ready(function() { 
  // Write your frame onload code here
}
2
Sachin Gaur

以下も私のために働いた：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>
$(window.parent.frames[0].document).ready(function() {
    // Do stuff
});
</script>

[0]はそれがドキュメントの最初のフレームであることを示し、[1]は2番目のフレームであることを示します。これは、マークアップを制御できず、ドキュメントの準備ができている場合に特に便利です。

2
brobert7

これは、iframeのDOMContentLoadedで発生したのと同様の問題だと思います。

私が書いた それについてのブログ投稿 。

2
zachleat

私はこの投稿で長い間働いてきました...これが私の解決策です。

test.html

<!DOCTYPE HTML>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script>        
      document.write('<frameset><frame name="frame_content" id="frame_content"></frame></frameset>');

      $('#frame_content').attr('src', 'test2.html');
      $('#frame_content').load(function()
      {
        if('${"#header"}' != '') {
          $("#header", frame_content.document).remove();
        }
      });
      if($('#frame_content').complete) $('#frame_content').trigger("load");
    </script>

</head>
</html>

test2.html

<!DOCTYPE HTML>
<html>

  <head>
  </head>

  <body>
    <div id="header">You will never see me, cause I have been removed!</div>
  </body>
</html>
1
Jochen

Info.aspxページ内にjQueryコードを配置しようとしましたか？

1
Davide Gualano

それが最善の解決策かどうかはわかりませんが、$(document).ready()を削除して本体を保持すると、すべてが完全に機能します。

0
matma

何をしようとしているのかわかりませんが、フレーム外で動作するさらに古いクラシックaspアプリがあり、最近jQuery機能を追加したところ、うまく機能しています。 $（document）.ready（）はフレーム内で正常に機能しますが、別のフレームでDOMを参照する場合は、フレームのonloadイベントを使用して、フレームのDOMがロードされたことを通知する必要があります。確かに、私はiFrameを使用しましたが、概念は同じである必要があります。

0
Richard B

この回答は遅れるかもしれませんが、この返信は私のような誰かを助けるかもしれません...

これは、ネイティブJavascriptコードを介して実行できます-

ifrm2 = var ifrm2 = document.getElementById('frm2');
if (ifrm2.contentDocument.readyState == 'complete') {
  //here goes the code after frame fully loaded
}

 //id = frm2 is the id of iframe in my page
0
newstockie

マークアップを変更する必要はありません。セレクターを修正するだけです。そのはず：

$("frame[name='main']").ready(function(){..});

ない

$("#frameName").ready(function(){..});

注：jQueryreadyイベントは複数回発生するようです。ロジックに問題がないことを確認してください。

0
Edward Olamisan