• ベストアンサー

JQUERYを使った環境でのonloadイベント

◆htmlの読み込みについて A.htmlのonloadイベントで、 B.htmlを読み込んで、表示しています。(あらかじめ用意しておいた div に読んだhtmlをセットしています) ◆困っていること A.htmlを開いたときはB.htmlの内容が表示できているのですが、 どこか他の画面から画面遷移して、A.htmlを開くと、B.htmlの部分がうまく表示されません。 ◆質問 何が起因している可能性があるでしょうか？ またその解決法はあるでしょうか？ 宜しくお願いします。

  • AJAX
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • shockatz
  • ベストアンサー率80% (153/191)
回答No.1

A.htmlをブラウザがキャッシュしてしまい、opnLoadイベントが走っていない。 ローカル環境(ダブルクリック起動)で試しとられるのと違います？ Webサーバから起動するとまた動作が変わると思いますが、 ・<body onLoad="...">ではなく、jQueryのDOMイベントハンドラ$(function(){...});に変える。 ・<meta>タグでキャッシュを切る ・それでもキャッシュされるようなら、遷移時、Javascriptを使ってurl末尾に乱数パラメタをつける。 location.href += "?" + new Date().tick; など。 などの方策が有効です。 外していたらすいません。

TeferiMage
質問者

お礼

やってみたところキャッシュの問題ではありませんでしたが、そういうことを気にしなければならないのだということがわかり、とても参考になりました。 ありがとうございます！

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. AJAX

関連するQ&A

  • 読み込み完了時のイベントは？

    ページが読み込まれた時のイベントは「onLoad」ですが、読み込みが完了した時のイベントはあるのでしょうか？ 何故知りたいかといいますと、画面表示後すぐにそのページでsubmitしたいのですが、読み込み中ですとオブジェクトが見つからずにエラーになってしまうからです。 良い方法がありましたら教えてください。

  • onloadがうまくいかない

    onloadを使って、 下記HPのtoggleエフェクトのJSが適用されたボタンを押したいのですがうまくいきません。 http://demos.mootools.net/Fx.Slide 現在作成コードの一部は、 ヘッダー部から、 <script type="text/javascript"> 　window.addEvent('domready', function(){ 　　//-vertical 　　var mySlide = new Fx.Slide('test'); 　　$('toggle').addEvent('click', function(e){ 　　e = new Event(e); 　　mySlide.toggle(); 　　e.stop(); 　　}); 　}); </script> <body onload="document.getElementById('help').click()"> <input type="button" id="help" name="toggle" value="ヘルプを表示"> <div id="test"> ヘルプ内容 </div> </body> みたいな感じで、 他にもログアウトボタンやらあるんですが、 それらのボタンは上記onloadの方法で起動できます。 なぜかJSが適用されてるボタンだけ出来ないような感じなのですが、 何か解決策はありますでしょうか？

  • onloadにsessionの値を渡したい

    ページが表示されたときに ポップアップメッセージが表示されるよう考えています。 メッセージはsession変数に入っています。 onloadで表示させるにはどうすればよいでしょうか。 コードはhtmlとjavascriptとvbscriptです。 前の画面からserver.Executeで遷移します。

  • JQueryでのAJAXで困ってます

    最近AJAXを勉強しようと思い、JQueryに手を出しました。 JQueryで画面遷移無しでdivで作ったメニューを選択して内容を指定したdivに表示させようと思っているのですが、 JQueryでのloadの動作がブラウザの違いで異なる動きをするので困ってます。 IEでは内容が表示されて、新しく表示した部分のJavaScriptが正しく動くのでいいのですが、 Firefox、Operaでは新しく表示した部分のJavaScriptが動作しません。 Chromeでは新しく表示した部分のCSSでさえ適用されません。 IE以外でも正しく動作させるにはどうしたらいいでしょうか？ ご回答、よろしくお願いします。

    • ベストアンサー
    • AJAX
  • window.onloadなどあらかじめ用意された物以外でページが最後

    window.onloadなどあらかじめ用意された物以外でページが最後まで読み込まれたか判定したいです。 条件を書きますね。 １．window.onloadなど直接head要素、またbodyの各イベント属性に記述は出来ない状態です。 ２．掲示板の上部にフリーテキストの部分があり、その部分のみ扱えます。使えるタグが制限されています。インライン要素はstrongブロック要素はdivです。このためインラインでスクリプトを書いて行きます。 window.onloadが発生した後やwindow.onabortが発生して ちょっと経った後にブラウザが「読み込みすでに完了済み」や 「読み込みを中断済み」のような何らかの値をどこかに格納したりしないのでしょうか。 また代替処置をするならばどんなスクリプトが有効でしょうか。 なるべく色んなページに対応したいです。 例えばbodyの中身が全部読まれているか判定したり、 一番最後の要素が読まれたかどうか判定するスクリプトです。 もっとも一番最後の要素が読まれたかどうかを判定するアナログなやり方だと window.onabortの時などイレギュラーな時に うまく行かないので出来るだけ何か画期的なものを探しています。 JSが好きな方々、よろしくお願いします。

  • イベントリスナー

    単純なスクリプトで実験しているのですが、原因がわかりません。<id="outer">にイベントリスナーをセットしています。 【例1】 <div id="outer"> 　　外側のボックス 　<div id="inner">内側のボックス</div> </div> 【例2】 <div id="outer"> <a href='#'>外側のボックス</a> 　<div id="inner">内側のボックス</div> </div> ※【例1】で「外側のボックス」の文字をクリックすると、イベントを捉えて"outer"が返ってきます(正常)。 【例2】で「外側のボックス」をクリックすると何も返ってきません。両者の違いは<a>で囲ってあるか、ないかだけです。 <a>で囲うとイベントの伝播(バブリング)が止まるのでしょうか？

  • jquery:animate中にイベントを付与

    #box{width:100%;height:100%;position:relative;} #idou{width:3000px;height:100%;position:absolute;} #ugoku{position:absolute;top:-300px;right:-1500px;} a{display:block;width:100px;height:100px;right:0;top:100px;} <div id="box"><div id="idou"><img id="ugoku" src="*.gif" width="300" height="300"><a href="">左に移動</a></div></div> ・jQuery(1.7.1） ・mousewheel.jsを使用、var scrollInt=100;$('html').mousewheel(function(event,mov){$("html,body").css("left","-="+(scrollInt*mov)+"px");});で通常は横移動するソース。 ・$("a").click(function(){$("#idou").animate({left:0},"slow");});でリンクをクリックすると左に戻す。この時の#ugokuが問題。 ・移動の角度は50度で設定、#idouのleftが-1000～-1500pxの間というような特定の間に#ugokuの画像を画面の右上から左下にanimateで流したい。 最後の項目をやろうとして完全に行き詰ってしまって困っています。 どちらかというと数学の問題かもしれません。 animate動作中に、#idouのleftが～pxになったときを拾うようなイベントは存在するのでしょうか？その他良いやり方やURLあれば教えて頂けると幸いです。 よろしくご教授ください。

  • PreRenderイベントの実装方法について

    PreRenderイベントの補足方法について、教えてください。 私C#のみわかり、また、C#のWindowsアプリケーションは作成した事がありますが、 ASP.NETは、、、今週学習をはじめたばかりの初心者です。（他の仕事の合間をぬっての学習） 以下に、事の成り行きと目的を説明します。 画面Aから画面Bへの遷移に伴い、ある条件下では、例えば画面Bのフォントカラーを赤、 また、違う条件下ではフォントカラーを青等に変更したいと思っています。 この場合、下記URLを参考にしたところ、 http://naosan.way-nifty.com/blog/2010/01/aspnetno.html １、表示側でのHTML、今回でいうならばフォントカラー設定タグにIDタグを付与する。 ２、表示側でのHTML、今回でいうならばフォントカラー設定タグにrunat="server"を付与する。 ３、ロジックサイド（・・・.CS側）にて、画面AからBへの遷移処理後のPreRenderイベント時に、 フォントカラーを設定する。 ただ、ここで、どうやってPreRenderイベントを利用するかわかりません。 以上、ご存じの方どうぞお願い致します。

  • イベントに適切な値が伝わらない

    0から9までidをもつdivを用意して、それぞれクリックしたら そのidを表示したいのですが、なぜかどれをクリックしても 表示されるのは「10」でした。以下のやり方では何がいけないのでしょうか？ function sample(){ for(i=0; i<10; i++){ var obj = document.getElementById(i); obj.onclick = function(){ sample_alert(i); }; } } function sample_alert(i){ alert("i="+i); } window.onload = function() { sample(); } for($i=0; $i<10; $i++){ print "<div id=\"{$i}\">{$i}</div><br>\n"; }

  • jQuery Mobileでのページ遷移、挙動

    jQuery Mobileを使ってスマートフォン用のサイトを作成しています。 ページ遷移時の挙動が直せなくて困っています。 1つのHTML内に複数のページを作るやり方ではなくて、 リンクには rel='external' フォームには data-ajax='false' をつけて、 Ajaxでのページ遷移を行わないようにしているつもりです。 で、おかしな挙動なのですが、 1.AのページからリンクをクリックしてBのページを表示する。 2.ブラウザの戻る機能でAのページに戻る 3.再びリンクをクリックしてBのページを表示する。 このとき、Bのページが表示された後、「Loading」というメッセージが表示され、 Aのページを表示してしまいます。（AのページをAjaxで読み込んでいるか、 Bのページが何らかで非表示になっているように思えます） $.mobile.ajaxLinksEnabled = false;　という設定も試してみたのですが、 特に変化はありませんでした。 この解決策を教えてください。 出来れば、jQuery Mobileのデザイン関連だけ使って、ページ遷移絡みは 使いたくないという気持ちです。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する