• 締切済み

JQueryでのloadの動作がFirefoxで動かなくて困っています

JQueryでのloadの動作がFirefoxで動かなくて困っています。 サイトのheaderとfooterを外部htmlにして、JQueryのloadで呼び出し指定のdivに出力するようにしたいのですが、IEでは上手くいきましたが、FFでは全く動きません。 $(document).ready(function(){ $("#header").load("../js/header.html #header"); $("#footer").load("../js/footer.html #footer"); });

  • AJAX
  • 回答数2
  • ありがとう数23

みんなの回答

回答No.2

古い質問で、いまさら回答にはなっていないかもしれませんが、 こちらFireFoxでプレビュー中同じ問題に直面しております。 この質問を読んで、IEで試したところ問題なくパスできました。 解決策にはならないかもですが、firefoxでは読み込むファイルと、読み込ませるファイルを同階層におけば一応問題はパスできます。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

id="header"がついたエレメントは、AJAXする時点で、 確実に1つだけ存在してますか？ 英語読解力今一ですが、 「the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.」 読み込み先と読み込み元のIDが同じ場合、うまく動作しない事があるみたいです。 そのほか、 イベントハンドリングの.load()とajaxの.load()が同じメソッド名であるための 不具合なんてのもあります。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. AJAX

関連するQ&A

  • jQueryのloadのcallbackが変な動作

    jQueryのloadメソッドでCallBackが成功しているにも関わらず失敗する場合があります・・・対象方法が全くわからないのでご教示願えませんでしょうか？ 【A.html】 <script type="text/javascript" src="jquery-1.4.1.min.js"></script> <table> <tr> <td><div id = "target_1"><div id = "target_2"></td> </tr> </table> <script type="text/javascript"> $.ajaxSetup({ cache: false }); var xmlHttp; xmlHttp = new XMLHttpRequest(); xmlHttp.open("GET", "A.html", false); xmlHttp.send(null); alert(xmlHttp.responseText); $(document).ready(function(){ $("#target_1").load("a.txt .tag", function(Text, status) { if ($("#target_1").text() == "あああ") { $("#target_1").replaceWith("<img src = 'a.png'>"); else if ($("#target_1").text() == "いいい") $("#target_1").replaceWith("<img src = 'b.png'>"); alert( "text: " + Text + "\nstatus: " + status ); }); $(document).ready(function(){ $("#target_1").load("a.txt .tag", function(Text, status) { if ($("#target_1").text() == "あああ") { $("#target_2").load("a.txt .5tag");★ else if ($("#target_1").text() == "いいい") $("#target_2").load("a.txt .5tag");★ alert( "text: " + Text + "\nstatus: " + status ); }); }); 問題は★印が付いているところの処理です。 アラートではSUCCESSになるのですが、なぜかロードが失敗する時があります。 割合としては10回に1回程度で1回発生するとブラウザの再起動をしない限り二度とロードができなくなります。 原因は何がいけないのでしょうか？

  • jqueryを使った共通html埋め込みができない

    各ページに共通なヘッダ部分を、jqueryを使って読み込みたいと以下のコードを書いたのですが、なぜか読み込まれません。 test.htmlとheader.htmlは同階層（トップレベル）にあって、jsディレクトリにjquery-1.7.1.min.jsを置いています。 どうか知恵をお貸しください。 よろしくお願いします。 test.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> <!–- $(function(){ $("#header").load("header.html"); }); // -–> </script> <title>test</title> </head> <body> <div id="header"></div> main </body> </html> header.html <div id="header">header</div>

  • jQuery.jsを使ったhtml外部読み込み

    教えてください。 現在Jqueryを使用して外部htmlを読み込ませようとしていますが、 うまくいきません・・・ ■本体html <head> <script src="js/jquery-1.8.3.min.js"></script> </head> <body> <script type="text/javascript" src="sample.js"></scrip> <div id="sample"></div> </body> ■sample.js // JavaScript Document $(function(){ $("#sample").load("sample.html"); }); ■読み込ませるsample.html　特に設定なし このような感じですが、全然読み込めません。。。 javascriptを外部リンクにしているのは、読み込むhtmlが複数ある為、 headの見栄えが悪くなるからという個人的な意見です・・・ 済みませんがお知恵をお貸しください！！

  • 外部ファイルを読み込む方法について

    外部ファイルを読み込む方法について様々なサイトを参考にしている中、 jQuery.jsを使った方法についてご質問させていただきます。 ファイルは以下のように <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $(function(){ $("#header").load("header.html"); }); // --> </script> （HTMLファイル） <div id="header></div> （外部ファイル header.html） <p>外部ファイルのテスト</p> 上記のとおり設定しブラウザで確認（IE及びFirefox）すると IEでは画面上外部ファイルが読み込まれた状態で表示はされているが、 ソースは<div id="header></div>と表示。 一方FirefoxのFirebugで確認すると<div id="header><p>外部ファイルのテスト</p></div> と表示しています。 ここでお聞きしたいのが、巡回ロボットはIEでソース表示されるような認識になるのか・・・ あるいは、外部ファイルが読み込まれた状態のソースで認識してくれるのか・・・ 疑問に感じましたのでご質問させていただきました。 なお、参考にさせていただいたサイト内の注意点として上記の方法だと「空div」でひっかかります。と記載がありました。 なにとぞ、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • jQueryの $(function(){ });

    jQueryについて基本的な質問をさせてください。 基本的にjQueryは、お約束として $(document).ready(function(){ }); と記述し、その中に実行処理を書いていくと思うのですが loadを待たずに実行させたい時は $(document).ready(function(){ });は記述しなくてもよいのでしょうか？ どの本をみてもjQueryのお約束事みたいに $(document).ready(function(){ });　を必ず書くと載っています。 自分でやってみたところ、記述しないでも問題なく動いているのですが、 やっぱり　$(document).ready(function(){ });　を記述しないと、何か問題があるのでしょうか？ ご存知の方、教えてください。 どうぞ宜しくお願いたします。

  • jqueryを使用して、外部のhtmlファイルから各ページ共通のサイド

    jqueryを使用して、外部のhtmlファイルから各ページ共通のサイドメニューを読み込んでいます。 fairefox、及びIEの8から6までは動作を確認しているのですが、IEの5.5だけは読み込み時に、『オブジェクトでサポートされていないプロパティまたはメソッドです。』というスクリプトのエラーがおきてしまいます。 エラー部分はおそらく.load部分だと思います。 IE5.5でもjqueryはクロスブラウザで対応しているはずですし、他のブラウザで確認がとれているのになぜ、5.5だけエラーがでてしまうのでしょうか？ ちなみにhead部分でjqueryと作成した外部ファイルを読み込んでいます。 作成したjsのソースです ----------------------------------------------- var urlflag = location.href+""; if ( urlflag.indexOf( "aaa ) == -1 || urlflag.indexOf( "bbb" ) == 23 ){ 　 $(document).ready(function(){ $("#left_box").load("test_a.jp #lbox_inner"); $("#top_right_box").load("test_a #rbox_inner"); }); } else{ $(document).ready(function(){ $("#left_box").load("test_b.jp #lbox_inner"); $("#top_right_box").load("test_b #rbox_inner"); }); } ----------------------------------------------- ソース部分に誤りがあるか、もしくは呼び出すタイミングなどの問題でしょうか？ かなり調べて見ましたがこれ以上は思い当たる節が見つかりません。 何か回避策などあるようでしたら、どなたか是非教えていただけないでしょうか？

  • ブログパーツのjquery利用について

    ブログパーツでjqueryを使用してhtmlなどを出力したいのですが、 思い通りの動作ができません。 jsファイルの中身 ------------------------------------------------------------ document.write("<script type='text/javascript' src='http://hoge.com/jquery.js'></script>"); document.write('<link rel="stylesheet" type="text/css" href="http://hoge.com/hoge.css">'); $(function() { $("div").html("<p>aaaaaaaaa</p>"); }); document.write('<div></div>'); ------------------------------------------------------------ これじゃあ、ほかのサイトからjsを読み込んでも 出力されないのでしょうか？ （<script src="http://hoge.com/hoge.js"></script>） document.write("<div>aaa</div>");だけであれば、 ちゃんと出力されるのでjqueryの記述がおかしいのだと思います。 ご教授お願いいたします。

    • ベストアンサー
    • AJAX
  • jQueryのloadで上の階層の外部HTMLを読みたい

    jQueryのloadで上の階層の外部HTMLを読みたい 同じ階層内は問題なく読み込めたのですが、上部階層のファイルが読み込めません。 記述は $("#sub_header").load("../header.html"); たぶんこれが間違っているんだと思うのですが検索してもわかりませんでしたので、 質問させて頂きました、よろしくお願いいたします。

  • jquery3系がうまくいかない

    jquery3系が出ていたので使ってみたのですが、CDNはうまくいったのですが、そのものをダウンロードして使うほうがうまくいきません。 https://code.jquery.com/jquery-3.1.1.min.js のソースコードをコピペしてjquery-3.1.1.min.jsというファイルを自分で作って下記のようにしているのですが、CDNが読み込まれなかった場合に読み込むというやり方のようです。 <!-- start load jquery --> <!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.11.0.min.js"><\/script>')</script> <![endif]--> <!--[if gte IE 9]><!--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-3.1.1.min.js"><\/script>')</script> <!--<![endif]--> <!-- end load jquery --> ・もちろん下記のようにもしましたが駄目でした。 <!-- start load jquery --> <!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.11.0.min.js"><\/script>')</script> <![endif]--> <!--[if gte IE 9]><!--> <script>window.jQuery || document.write('<script src="/js/jquery-3.1.1.min.js"><\/script>')</script> <!--<![endif]--> <!-- end load jquery -->

  • JQueryがChromeで動くがＩＥで動かない

    JQueryで書いた単純なJavaScriptが ＩＥで動かず困っています。 Firefoxでも動いており F12のデバッガを使ったとき、 Chromeと、Firefoxはデバッグポイントでストップするのですが、 ＩＥだけ、そもそもFunctionの中に入ってきません。 $(function(){ //do something }); ちなみに、documentのreadyや、ドロップダウンリストボックスのchangeのイベントです。 お知恵をお借りできませんでしょうか？ 宜しくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する