- ベストアンサー
XMLHttpRequest()で、読み込むテキストファイルにJavaScriptを記載する
お世話になります。 tst.htmlの内容 中略・・・・ <script type='text/javascript'><!-- ・・・・・・・・・・ var httpObj; httpObj = new XMLHttpRequest(); httpObj.open( "GET", 'tst.txt', true ); ・・・・・・・・・・ 中略・・・・ ・・・・・・・・・・ var txtObj=document.getElementById('DivText') txtObj.innerHTML = httpObj.responseText; ・・・・・・・・・・ 中略・・・・ ・・・・・・・・・・ funnction dsptst(){ documento.write('JavaScriptのあいうえお'); } //--> </script> <div id="DivText"></div> tst.txtの内容------------------------ 表示のテストあいうえお<br> <IMG src="abc.gif"> <script type='text/javascript'><!-- dsptst(); //--> </script> eof -------------------------------------- としますと、 <div id="DivText"> のエリアに 表示のテストあいうえお とか、 画像 abc.gif は、表示されます。 しかし、 「JavaScriptのあいうえお」 は、表示されません。 innerHTML で、テキストファイルを取得したときに それを表示するエリアに JavaScriptで、定義した関数の表示を行うにはどのようにしたらよいでしょうか。 なにとぞよろしくお願いいたします。
- rqg2010
- お礼率77% (283/364)
- JavaScript
- 回答数8
- ありがとう数8
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (7)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
Ｗｅｂサーバーにアップして試してますよね？
お礼
＞Ｗｅｂサーバーにアップして試してますよね？ 私の加入しているプロバイダのサーバにアップしてみました。「読込」ボタンが表示されるだけで、無反応でした。 また、作成し直した全てのスクリプトをアップしようと「お礼」「補足する」の双方を試みましたが文字数制限によりできませんでした。 そこで、新しい質問ならできるかと新スレッドを立てました。 しかし、同じく文字数制限となりました。新スレッドを立てた意味はなくなりましたが、 No.2234012 へ移行、ということで、このスレッドは閉じさせていただきます。 どうもありがとうございました。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#3補> ＞<script language="JavaScript"><!-- ＞JmpMenuInPage("100%"); ＞//--> ＞</script> の部分は、おそらく、document.write によって読み込まれる時にメニューを書き出しているのだと思いますが、 すでに述べたように、そういう方式は使えません。 ただ関数を実行すればいいのではなくて、実行される場所が肝心でもあるので、スクリプトを読んできて実行すればいいというものでもないです。 なので、JmpMenuInPage("100%") は、書き換える必要があります。 (後、関数から書き出せる場所も指定してやる必要があります） JmpMenuInPage の定義（中身）を補足していただけますか？
お礼
お早うございます。レスありがとうございます。 ＞JmpMenuInPage の定義（中身）を補足していただけますか？ function JmpMenuInPage(TblWdth){ document.write('<table width = "' + TblWdth +'" ><tbody><tr><td class="menu_jump13l">' +'<a href="#00top">▲<br>ページ<br>Topへ</a>' +'</td>' +'<td class="menu_jump13m">' ); var cnt = 0; loopFlg = true; document.write('| '); while (loopFlg) { document.write(JmpMenuInPage_Data[cnt]); document.write(' | '); loopFlg = (JmpMenuInPage_Data[++cnt] == undefined) ? false : true; } document.write('</td>' +'<td class="menu_jump13r">' +'<a href="#00btm">ページ<br>最終へ▼</a>' +'</td></tr></tbody></table>' +'<br>' ); var retCriteria='</td>' +'<td class="menu_jump13r">' +'<a href="#00btm">ページ<br>最終へ▼</a>' +'</td></tr></tbody></table>' +'<br>' } var JmpMenuInPage_Data = new Array( '<a href="#azumino_ryotei">D11</a>', '<a href="#azumino_schechi">D12</a>', '<a href="#azumino_photo">D13</a>' ); CSS td.menu_jump13 { font-size : 13px; text-align : center; width : 84%; height:30px; vertical-align : middle; } td.menu_jump13l { font-size : 13px; text-align : left; width : 8%; height:30px; vertical-align : middle; background-image : url(cork07.gif); } td.menu_jump13r { font-size : 13px; text-align : right; width : 8%; height:30px; vertical-align : middle; background-image : url(cork07.gif); } 配列の定義も以前教えていただいたようにフィールドにあたる項目をを定義してから、配列を定義すればスマートになると思いますが、ただ、羅列しただけとなっています。早く書き直したく思っているところです。 よろしくお願いいたします。
Ajax(XMLHttpRequest)のResponseTextの扱いは、SafariやOperaで文字化けしやすいので注意が必要です。 JavaScriptをAjaxで読み込む方法は、 httpObj.open( "GET", 'tst.txt', true ); としておき、Callback関数の中で、 var re = httpObj.responseText; eval(re); とするだけです。 その後は、reを使うのではなく、tst.txtの中にある変数や関数を使ってください。 Ajaxとして理解できなければ、まずは、 <script type="text/javascript" src="tst.js"><script> として読んだときに思うとおりに動くようなJavaScriptファイルを作成してみてはいかがでしょうか。 その後、ファイル名をtst.txtに変更し、Ajaxで動的に読み込むだけです。 もとのファイル名が.jsですから、その内容はどう書けばよいかわかりますよね？ （<script (略) src="tst.js"></script>で書くときの書き方がわからなかったら、改めて質問してください。） > ANo.2への補足 DIVを大量に作られていますが、（あまりおすすめはしませんがinnerHTMLで作られるなら） var div=document.createElement('DIV'); div.innerHTML=（新しい質問）; document.appendChild(div); としていくことで、divを動的に追加することが出来ます。 もちろんいちいちDIVを増やさなくても、既存のスペースを書き直すことも出来ます。 （質問のサンプル部分ですでにやっていらっしゃる方法です） 詳しい解説は、「DOM」解説サイトを回ってみてください。 Ajaxといいつつ、結局やることはDOMがメインですので、 AjaxやXMLHttpRequestに関するサイトを見られても、大して詳しくは書いてないです。 DOMを使わなくても出来なくはないですが、DOMを使われた方が出来ることも多いです。
お礼
貴重なレスありがとうございます。 txtObj.innerHTML = httpObj.responseText; とするところを var re = httpObj.responseText; eval(re); と、してみました。 responseText;で、読み込むテキストの内容を document.write('こんにちわ。<BR>'); document.write('<IMG src="../tripc/060325azumino/jonen_schech01.gif" width="200" alt=""><BR><BR>'); と、してみました。 おっしゃられるとおり、JavaScriptの内容が表示されました。 ありがとうございました。 でも、 こんにちわ。<BR> <IMG src="../tripc/060325azumino/jonen_schech01.gif" width="200" alt=""> は、そのまま、テキストファイルの内容として保存しておき、 その中に同等の文書として、 <script language="JavaScript"><!-- JmpMenuInPage("100%"); //--> </script> と、いう形で、書いて、 このJavaScriptのJmpMenuInPage("100%"); を実行したかったのですが。 とても参考になりました。 ありがとうございました。 これから、発展させても行けそうです。 更に、考えてみます。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
＃２の補足読ませていただきました。 （なんか、最近補足のメールがちゃんと届かない、古いのばかり何回も来る）返事が遅かったらすみません。 まどろっこしいと思われると思いますが、もう少し質問させて下さい。 menu 部分自体の共有化はできているんですよね。 外部スクリプトにして <script src="munu.js"></script> みたいにすればいいことですもんね。 それで、 動的に読み込む内容の 例えばDIV11 の中の内部メニュー部分をスクリプトでという話なのでしょうか そうではなくて DIV11 とDIV12の間にメニューを入れる？ DIV03 とDIV11の間にメニューを入れる？ まあ、それはそれとして、 動的に読み込まれるページに動的に読み込まれるメニューを付けるということですよね。 内容が動的に読み込んで表示できるなら、メニュー部分も動的に読み込んで表示できるように思うのですが、 その部分がスクリプト(document.writeで出力するような・）で構成されているというようなことですか？ できましたら、そのメニューを構成するスクリプト部分を補足していただけないでしょうか？ どちらにしても、メニューを書き出す領域（<div id="menu1"></div>みたいなの）が必要になるように思います。
補足
「お礼する」ですと、投稿できないようなので、「細くする」で、投稿させていただきます。 重ねてのレス誠にありがとうございます。 ＞まどろっこしいと思われると思いますが、もう少し質問させて下さい。 とんでもございません。こうして、レスを頂けるだけでとても励まされます。私の方こそ返信が遅れて申し訳ありません。 ＞menu 部分自体の共有化はできているんですよね。 外部スクリプトにして <script src="munu.js"></script> みたいにすればいいことですもんね。 そのようにしています。 ＞動的に読み込む内容の ＞例えばDIV11 の中の内部メニュー部分をスクリプト＞でという話なのでしょうか ＞そうではなくて ＞DIV11 とDIV12の間にメニューを入れる？ ＞DIV03 とDIV11の間にメニューを入れる？ DIV11 とDIV12の間にメニューを入れる と、いうことです。 DIV11～DIV1*は、説明上DIVで分けたようにしましたが、XMLHttpRequest()で、取得したテキスト文章を <div id="chang"></div> の中に一括表示したいものです。 そして、この一括表示した中に<div11>～<div15>があり、この間をjavascriptによるメニューで移動をさせたい。ところがjavascriptによるメニューが表示できない。 と、いうことでの質問です。 ＞できましたら、そのメニューを構成するスクリプト部分を補足していただけないでしょうか？ 以下が、*.txtとして読み込んで表示したい箇所です。 JmpMenuInPage("100%"); と、いうところが表示されないということの質問になります。 <div id="11> <IMG src="../art/art_titl21-120.gif" alt=""> <IMG src="../tripc/060325azumino/jonen_schech01.gif" width="200" alt=""> <BR>常念岳です。<BR> </div> <script language="JavaScript"><!-- JmpMenuInPage("100%"); //--> </script> <div id="12> ・・・・・・・・・・・ ・・・・・・・・・・・ </div> <script language="JavaScript"><!-- JmpMenuInPage("100%"); //--> </script> ・・・・・・・・・・・ ・・・・・・・・・・・ <div id="15> ・・・・・・・・・・・ ・・・・・・・・・・・ </div> もちろん、JmpMenuInPage("100%"); は、動作確認済みです。<div id="11"><div id="12"><div id="13">をジャンプします。 div id="11"～"15" の内容にあたる画像は表示されます。しかし、JmpMenuInPage("100%"); は、表示されません。 ご丁寧なレスに甘えての投稿で、恐れ入ります。 よろしくお願いいたします
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#1>具体的にどうやればよいかわかりません。 試しに、何かサンプルを作ってみてもいいんですけど、 「作ってくれたのはいいけど、私の用途には合わないな・」 なんてことも起こりがちなので、 具体的に、どのようなことがしたいのか教えてくれませんか？ 質問にあるような動作をさせる関数なら、別に分ける必要がないように思われます。
補足
重ね重ねのレスありがとうございます。恐れ入ります。 >試しに、何かサンプルを作ってみてもいいんですけど >具体的に、どのようなことがしたいのか教えてくれませんか？ お言葉に甘えまして。 +-------+--------------------------------+ | Menu | SubPage | | | | | | | +-------+--------------------------------+ |Div01 | | | +----------------------------------------+ |Div02 | | | +----------------------------------------+ |Div03 | | | +----------------------------------------+ |Div11 | | | +----------------------------------------+ |Div12 | | | +----------------------------------------+ |Div13 | | | +----------------------------------------+ |Div14 | | | +----------------------------------------+ |略 | +----------------------------------------+ |略 | |略 | +----------------------------------------+ |Div51 | | | +----------------------------------------+ | | +----------------------------------------+ |Div54 | | | +----------------------------------------+ と、いった具合のページを作成したく思っています。 ここで、div01～div54 を一つのページに読み込むと時間を要する。 そこで、div01～div03,div11～div14,・・div51～div54 を、別ページとして作成したい。 しかし、別ページとして作成すると、 その、全てのページにMENU、SubPageを配置する必要がある。 ここで、フレーム分割を考えたが、目的にそぐわない。 また、インラインフレームも考えたが、目的にそぐわない。 そぐわない理由は、必要なら記載させていただきますが、割愛させていただきます。 このようにページ分割をすると、 MENU、SubPageも毎回読み直さなければならなくなる。 また、 SubPageは、Div1*、Div2*、・・・Div5*は、関連が深いため、同一ページ内でのジャンプメニューを配置したい。 このようなことを考えていたときにAJaxに出会いました。 Menu、SubPageは、固定しておいて、 Div1～Div5、などを一つのファイルとして、読み込み 切り替えられる。これはすごい。 と、おもったのです。 しかし、 Div11と、Div12の間、また、Div13の 間などにページ内の同じジャンプメニューを配置するとき、同じメニューなので、JavaScriptで書こうと思いきや、それができませんでした。 それ故の質問です。 紹介していただいたJsonでならできるかと調べ始めたのですが、それも思うように理解できず行き詰まっていました。 そのとき、ありがたいレスを頂き、お言葉に甘えた次第です。 私の意図も、説明の舌足らず故、説明の未熟さ故、すぐに伝わりませんでしたら、その時には、付け加えて説明させていただきます。 なにとぞよろしくお願いいたします。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
実際に試してみたわけでの無いので参考までに読んで下さい。 まず、document.write についてですが、 document.write は、実行するタイミングが問題になることがあります。 Ｗｅｂページが読み込まれる段階でjavascript が実行されて、その一部としてdocument.write が実行される分には良いのですが、 一旦ページが作成した後実行すると、新しいページ（自動的のopen される）に書き込まれることになって、（書き込んだ内容以外）画面が真っ白ということになります。 というわけで、一旦ページの構成が終わった後で、DIV の中に動的にjavascript を差し込んで、動的にdocument.write を実行するようなことができたとしても、おそらく望むような動作にはなりません。 innerHTML で動的にＨＴＭＬを構成するのであれば、document.write を使わずに、innerHTML を使ってDIV の中身を書き出すような構成にするべきだと思います。 それは、それとして、 外部スクリプトして<script></script> の無い状態のファイルを テキストとして読み込んだとしたら、eval 関数でスクリプトの解釈実行をさせることができると思います。 場合によっては、ＪＳＯＮ形式で記述しておけば取扱がわかりやすいかもしれません。
お礼
レスありがとうございます。 ＞外部スクリプトして<script></script> の無い状態のファイルを ＞テキストとして読み込んだとしたら、eval 関数でスクリプトの解釈実行をさせることができると思います。 と、 ＞場合によっては、ＪＳＯＮ形式で記述しておけば取扱がわかりやすいかもしれません。 この二つができれば良いというように思うのですが、 具体的にどうやればよいかわかりません。 これから必死に調べます。 とりあえずは、お礼まで。
お礼
ご丁寧にサンプルコードまで作成していただきありがとうございます。 嬉しさ余って早速試してみましたが、「読込」というボタンが表示されるだけで、そのボタンを押しても何の反応もありません。 取りあえず、嬉しさのあまり実行したことなので、間違っている箇所もあるかと思います。ゆっくりとソースを読ませていただきます。 実際に、どのようなファイルを作って試したかということも併せてお知らせしようとしたのですが、文字制限にかかりULできませんでした。 新しく質問の形で、その報告をさせていただきます。 新しい質問でも文字制限にかかった場合には、改めてご報告いたします。 どうもありがとうございました。