• 締切済み

jQueryのloadで上の階層の外部HTMLを読みたい

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

みんなの回答

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

XHR.readyStateが '1' という事は、’ロード中’って事ですね 0 = 初期化されていない 1 = ロード中 2 = ロード済み 3 = 対話可能 4 = 完了 です。 XHR.statusの方はサーバーが返すレスポンスコードですから、 まだ、無いんですね。うまくいくと'200'が返されるはずです。 サーバーが FileNotFound 404 や、アクセス禁止、インターナルエラー 等のコードを返してる分けでもない。 残念ながら、それしか解りません。 お役に立ちませんで...

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

「たぶんこれが間違っているんだと思うのですが」 =>相対パスのURLでも$.load()は可能です。   そおいった意味では間違っていません $("#sub_header").load("../header.html", function(responseText,textStatus,XHR){ alert(responseText); //読み込んだもの alert(textStatus); //"success"のはず alert(XHR.readyState); //"4"のはず alert(XHR.status); //"200"のはず alert(XHR.responseText); //読み込んだもの }); で、ステータスとか読み込んだ物を確認できますよ。 根本的にAJAX利用、思い違いしてませんか? 読み込んだ、HTMLが自ページのHTMLと不整合を引き起こし、 それがブラウザーの自動補正機能でも修正しきれないもの だとレンダリング不能になり、いつまでもグルグルになり ますよ。

ReBirth1981
質問者

お礼

お世話になります QNo.6042655 JQueryでのloadの動作がFirefoxで動かなくて困っています。 この質問、たまたまyyr446さんがお答えになられている質問ですが 私とまったく同じ症状なんです。(ちなみに私はfirefoxでプレビューしております) QNo.6042655と同じくIEでプレビューしてみると問題なく動作しましたことを報告します。 このことを受けてFireFoxでの動作問題と受け止め、二つのファイルを同階層内にとどめることによって一応の解決と致しました、と同時にお礼申し上げます、ありがとうございました。 ですが根本的には解決してはおりません。。。 FireFoxの問題で済まして良いのやら。。。

ReBirth1981
質問者

補足

回答ありがとうございます。実行してみました。 空 undefined 1 0 空 ちなみに読み込みが成功しているページでは、数字は少し違いましたがyyr446さんの言ったとおりの結果がでました。 成功しているページ $("#header").load("./header.html"); index.htmlから同階層内のheader.htmlの読み込み 失敗しているページ $("#header").load("../header.html"); index.htmlから一つ上の階層のheader.htmlの読み込み 基本的に二つはコピー、他のファイル指定はjs含め全て合っているはず(alertの結果が出ることからも)で、成功と失敗の差はドット一つです。 ../header.htmlを絶対パスで打ち込んでみると、successとは出ましたが、 他は変わりなしでした。 //根本的にAJAX利用、思い違いしてませんか? 只今、何ができるか、どういったものか、AJAXについて勉強中ですので全て実験段階です。 javascript自体もほとんど初心者ですので、 今回の質問も二つのファイルの違いはドットひとつ、[ ../ ]という記述自体が使えないのかも? でも、調べても相対パス不可というのは見つけられなかった。。ということからなのです。 AJAX等についてはこれから理解するつもりですので、大目に見ていただけると幸いです。 undefinedということでいろいろ試していますが、まだ解決できません。。

関連するQ&A

  • 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"); });

  • jQueryのloadで外部HTMLを読みたい

    jQueryのloadで外部HTMLを読みたいのですが、うまくいきません。 原因は外部HTMLがshift-jisで作成されているからのようです。 Win IE6では完全に表示されず、 Win Firefoxでは文字化けを起こし、 Win Chromeでは正常に動作しました。 なお「外部HTMLはshift-jisのまま」「サーバ上で動作するプログラム(PHP,Perl,Ruby等)は使用しない」方法で、解決したいです。 ecl.jsの利用なども考えましたが、私には難しかったようです…。 何かご存知の方がいらっしゃればお教えください。 よろしくお願いいたします。

    • ベストアンサー
    • AJAX
  • JQueryでLoadで読み込んだHTMLに対し、$().widthで

    JQueryでLoadで読み込んだHTMLに対し、$().widthで幅設定などの操作ができずに困っています(TT 色々調べたのですが、情報が出てこなかったので質問させてください。 ---------------------------------------------------------- $("#loaddiv").load("http://hoge.com/hoge.html"); //ここでLOAD $("div#base").ready(function() { //hoge.html内の#baseが準備できたら。 baseC = $("div#base"); //hoge.htmlの中の要素。変数へ記憶。(*1) txtLine = $("div#textline",baseC); //hoge.html内#baseの中の要素 $(baseC).width(300); //#baseを幅300へ変更。 $(txtLine).width(300); //#textlineを幅300へ変更。 } ----------------------------------------------------------- なぜか(*1)の部分に、FireBugでブレークポイントを設定すると上手くいきます。 おそらく、#baseや#textlineを含んだHTMLファイルを、 Loadで読み込む前に、変数へ代入するからと想像しますが、 Load内の全要素読取終了後イベント(それに近い方法)か、 Loadで読み込んだ後の要素を上手く操作する方法をご存じの方、 この状況を打開する方法をご存じの方、どうか助けてください(TT

  • jqueryで外部ファイル読み込んだ後の動作

    jqueryで外部ファイル読み込んだ後、読み込んだ外部ファイルに記述されたIDに対しての操作をしたいんですが、うまく行きません。 ブラウザに読み込ませるHTML(main.html) <html> <head> <script type="text/javascript" src="jquery.js"></script> <script> $(function(){ $("#main").load("loadfile.html"); }); $("#str").html("50"); </script> </head> <body id="main"> </body> </html> #mainに読み込ませるHTML(loadfile.html) <html> <head> </head> <body> <p id="str">00</p> </body> </html> 自分なりの予想ではloadfile.htmlを読み込んだ後、 まだDOM要素が操作できない状態の時に$("#str").html("50"); が実行されてしまっていると思われますが、 こういう時は.ready()とかをうまく使うのでしょうか? 基本がまだ身についていなく、 とんちんかんな質問かもしれませんが、よろしくお願いします。

  • FlashとHTMLの階層が違うために表示できない(と思われる)。

    複数のswfファイルをランダム表示するために、ひとつのswfファイルをベースにして、そこに以下のようなアクションスクリプトを記述することによって動作させることができました。 //1~3の整数の乱数を,変数 ransuu にセット ransuu = Math.floor(Math.random()*13)+1; //ムービー内に ransuu+".swf" をロード this.loadMovie(ransuu+".swf"); しかし、上記のアクションスクリプトは、ベースとなるswfファイルと、それを設置するHTMLと、ランダム表示させるswfファイル群が全て同じ階層にあるということを前提にして書かれているようです。従って、HTMLをひとつ上の階層に設置し、そこからベースとなるswfファイルを設置しても、表示されません。FlashとHTMLの階層が違う場合には、どのように上記のアクションスクリプトを変更すればよいのかを教えてください。

    • ベストアンサー
    • Flash
  • 外部ファイルを読み込む方法について

    外部ファイルを読み込む方法について様々なサイトを参考にしている中、 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.jsを使ったhtml外部読み込み方法

    JavaScript超初心者です。 何卒ご協力の程よろしくお願い致します!! タイトルの通り、jQuery.jsを使ってページのある部分に外部htmlファイルを読み込みたいと考えています。 以下のページを参考にやってみましたが上手くいきません。 http://blog.sugulab.com/?p=14 やってみたのは下記のような作業です。 まず、下記サイトより「jquery-1.9.1.min.js」ファイルをダウンロードし、「js」というフォルダに「jquery.js」として保存しました。 http://jquery.com/download/ 次に参照ページにならってhead要素内に下記のように記述しました。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> <!– $(function(){ $("#leftcontent").load("shopmenu.html"); }); // –> </script> body要素内には<div id="leftcontent"></div>と記述しています。 このleftcontentの部分に、同じ階層にある「shopmenu.html」を表示させたいのですが、何も表示されず困っています。 PHP等の知識は一切ない為、これでいけそうなら頑張りたいのですが・・・ ド素人の為、見当違いのご質問でしたらご容赦ください。 どなたかご教示、アドバイスの程よろしくお願い申し上げます!!m(*u_u*)m

  • prototype.jsでディレクトリが異なる外部HTMLを読み込みで

    prototype.jsでディレクトリが異なる外部HTMLを読み込みできません。 よろしくお願い致します。 prototype.jsを使用して「sample.html」に「header.html」を読み込みたく、http://suh45.blog9.fc2.com/blog-entry-91.html のサイト様を参考にしています。 「header.html」が「sample.html」に対して、同階層または下階層にある場合は問題なく読み込みできるのですが、下記コードのように、sample.htmlが置いてあるディレクトリと同じ階層にあるディレクトリ(hogehoge)内にheader.htmlを移動させると読み込むことができなくなってしまいます。 ■読み込みたい相対パス <script type="text/javascript"> <!-- include("header", "../hogehoge/header.html"); // --> </script> これはこういったものなのでしょうか? ぜひお教え頂けると幸いです。

  • jQuery 読み込んだ外部htmlファイル内での関数の実行ができない

    jQuery 読み込んだ外部htmlファイル内での関数の実行ができない お世話になります。 iwatuturuturu と申します。 jQueryで読み込んだ外部htmlファイル内での関数の実行ができません。 [index.html]にてjQueryのloadを使用し、同じ階層内の[basic.html]のファイルを読み込んでいます。 slideToggleをしようしてアコーディオンをつけたいのですが、外部htmlの[basic.html]のアコーディオンみ動きません。 【ソース[index.html]】------------------------------------------------------------ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="../js/jquery.js"></script> <script> $(function(){ //外部ファイルの読み込み $("#basic").load("basic.html"); // アコーディオン $('dt').click(function(){ $(this).next().slideToggle('slow'); }); }); </script> </head> <body> <dl class="accordion"> <dt>アコーディオン</dt> <dd>ここの表示非表示が切り替わる</dd> </dl> <div id="basic"></div> </body> </html> 【ソース[basic.html]】------------------------------------------------------------ <div style="border:1px solid #666666"> <p>読み込み込まれるテキスト</p> <dl class="accordion"> <dt>ここをクリック</dt> <dd>ここの表示非表示が切り替わる</dd> </dl> </div> ------------------------------------------------------------------------------------ もともと外部より読み込まれたファイル内のjavasicriptは実行されない仕様なのでしょうか? また、他のやり方で同じ動作を実現する方法などありましたらご教授お願い致します。 よろしくお願いいたします。

  • jQueryのloadメソッドは外部XMLは読み込めないのでしょうか?

    jQueryのloadメソッドは外部XMLは読み込めないのでしょうか? タグが<aaa></aaa>となっているところの文字を抽出したいのですが外部にあるXMLは読み込めないものでしょうか? $("#my1").load( "http://server.com/hoge.xml .aaa" ); テキストファイルでタグを書くと読み込みが出来るのですが、なぜかXMLにするとうんともすんとも動きません

    • ベストアンサー
    • AJAX

専門家に質問してみよう