innerHTMLなどの反映タイミングについて

前へ 次へ
このQ&Aのポイント
  • JavaScriptでsleep関数の自作テストを行なっている過程でinnerHTMLやinnerTextが即時には反映されない現象に直面しました。
  • 対症療法の一つとして、alertなどの割り込み処理を挟むことでinnerHTMLやinnerTextの反映を確認できます。
  • 具体的には、(1)と(2)の間にalertを挟むとinnerHTMLやinnerTextが正しく反映されることがあります。
回答を見る
  • ベストアンサー

innerHTMLなどの反映タイミング

innerHTMLやinnerTextでの反映タイミングについて教えてください。 JavaScriptでsleep関数の自作テストを行なっている過程で innerHTMLやinnerTextが即時には反映されない現象に直面しました。 コードを貼り付けておきます。 ※htmlとしてIE等のブラウザで動かしてもいいですが、 htaとして実行したほうが簡易で軽くていいと思います。 このコードでは (1)innerHTML(かinnerText)で「実行中…」を表示 (2)sleep関数を呼ぶ (3)innerHTML(かinnerText)で「終了」を表示 という、(少なくとも表示部分に関しては) 極めて単純な処理をしています。しかし(1)が反映されません…。 (1)と(2)の間にalertを書いたりするときちんと(1)が表示されます。 よく他言語・フレームワークではflushとかリアルタイム描画等の コマンドやオプションで対処できるので、JavaScript(JScript)でも ないものかなぁと思い質問してみることにしました。 質問は以下です ・この現象はなぜ起こるのか。原因説明 ・これを回避する方法はあるかないか ・あるのならその方法 明示的なコマンド・オプションでも対症療法でもかまいません。 環境はとりあえずはWinXP・hta(レンダリングエンジン：IE8)で動けばOKです。 よろしくお願いします。 <html> <body> <div id="status">sleepテスト</div> <input type="button" onclick="testAjaxSleep()" value="testAjaxSleep"><br> <input type="button" onclick="testBusySleep()" value="testBusySleep"><br> <br> <script> var waittime = 3; function testAjaxSleep() { document.getElementById("status").innerHTML = "「AjaxSleep」実行中…"; ajaxSleep(waittime); document.getElementById("status").innerHTML = "AjaxSleep終了"; } function testBusySleep() { document.getElementById("status").innerText = "「BusySleep」実行中…"; document.close(); busySleep(waittime); document.getElementById("status").innerText = "BusySleep終了"; } function ajaxSleep(sec) { var stopTime = (new Date()).getTime() + Math.floor(1000 * sec); var url = "http://www.google.com/?dummy"; var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); while (stopTime > (new Date()).getTime()) { xmlHttp.open('GET', url, false); xmlHttp.send(null); } } function busySleep(sec) { var stopTime = (new Date()).getTime() + Math.floor(1000 * sec); while (stopTime > (new Date()).getTime()) {} } </script> </body> </html>

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

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

　お礼書いてくれたので、蛇足となりつつも AJAXでサーバーの応答待つのは、あまりにも不正確になりがちで、 処理待ちの間ブラウザごとロックするブラウザーもあるそうです。 そこで、HTAでやってるって事なんで、wscriptshellのsleepを使って もう一つ似たようなやつを↓ (sleep.js) var parm = WScript.arguments; if (parm.length > 0) { WScript.Sleep(parm(0)*1000); } を準備して HTA内からajaxSleep()で呼び出す、 function ajaxSleep(sec){ var WshShell = new ActiveXObject("WScript.Shell"); WshShell.run("wscript sleep.js " + sec , 0 ,true); //同期 WshShell = null; } ※実際は固定のパス名(sleep.jsの保存場所)も指定しときゃなきゃいけないけど。

mibusys
質問者

お礼

おお。おおおおぉおぉ。 きちんと(1)を実行してから(2)で待ち、その後に(3)が表示されることを確認しました。すばらしいです。 通常のWebや他のブラウザでは動かないものの、わたしは「とりあえずはWinXP・htaで動けばOK」というニーズだったので、これを完全にクリアしているわたしの求めていた結論といえます。(もともとの質問とは少しずれましたが) 余談ですが、私はhtaはできればhtaファイルそのもの1ファイルのみで完結するほうが望ましいと思っているため、wscript用に別ファイルを用意するのではなく、実行時にそのファイルを作成し、onunload時に削除するという方法をとろうかと思っています。 意外なことに新たなsleep実装方法を得ることが出来、大きな収穫となりました。ちょっと待っていてよかったです。 ご回答ありがとうございました。

その他の回答 (6)

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

他の言語なら、sleep関数があるから、 これこそ　AjaxSleep()関数　だ！ <div id="hoge"></div> <script type="text/javascript"> 　function AjaxSleep(sec){ 　 var XHR = new XMLHttpRequest(); 　 XHR.open("GET","sleep.php?timesec=" + sec,false); //同期通信にする！ 　 XHR.send(null); 　 if(XHR.responseText==="complete") XHR = null; 　} 　document.getElementById("hoge").innerHTML = "hoge"; 　//3秒待つ 　AjaxSleep(3); 　// 　document.getElementById("hoge").innerHTML = "fuga"; </script> </body> sleep.phpの中で、 <?php header('Content-Type: text/plain; charset=UTF-8'); if(isset($_GET['timesec'])){ usleep($_GET['timesec'] * 1000000); } echo 'complete'; ?>

mibusys
質問者

お礼

これは…No.1で私が記述した 「指定秒数sleepしてからレスポンスを返すサーバへアクセスする方法」 に該当しますね。 このタイプの擬似sleepがもっともきれいな仕組みで出来そうですよね。 「JavaScript単体で実現させたい」という希望に対応することは、 難しそうだということはわかりました。 サーバーを使用しsleepする方法を検討してみます。 ご回答ありがとうございました。

回答No.5

>待っている間に他の処理をしてもらっては困ります。 はい。 whileでのsleepのエミュレートは「処理をしない」です。 つまり、画面の描画も行いません。 画面の描画という「sleepの処理以外の処理」を行っていませんから、正しい動作です。 なお、「正しい動作」と「期待する動作」は意味が違いますので、あしからず。 将来的にはE4XやGecko定義のJavaScript、JScriptなどでCなどのsleepと同じ物が作られるかもしれませんが、 現段階では他の動作（画面描画）をさせたい場合は、setTimeoutなど、他の処理が出来る方法を使わなければなりません。 ブラウザには処理をさせるが、利用者には処理をさせないというのであれば、 ドキュメント全体で入力を受け付け、sleep中はその処理をキャンセルするしかないですね。 <form onsubmit="return false;"> のような方法です。（他にDOMを使った方法もありますが） どうしてもsleepを使いたいのであれば、多少強引かもしれませんが、ご参考に。 未検証です。 function testBusySleep() { document.getElementById("status").innerText = "「BusySleep」実行中…"; setTimeout(function(){ busySleep(waittime); document.getElementById("status").innerText = "BusySleep終了"; }, 1); }

mibusys
質問者

お礼

>whileでのsleepのエミュレートは「処理をしない」です。 >つまり、画面の描画も行いません。 (2)の最中に画面描画を行なわなくてもまったく問題ありません。希望は(1)を実行してから(2)に進みたいということです。質問はその実現は出来ないのかということだったのですが、それは説明するまでもなくできないということなのでしょうかね。 画面描画を強制的に起こさせようと試行錯誤してみました。 (1)の処理部分に「resizeBy(3, 3)」と書いてみました。すると、ウインドウ枠の変更自体は即時に起こったのですが、内側のレンダリングだけが遅れ、おかしな見た目になりました。それ以外にもいくつか試したのですが解決には至りませんでした…。 ご回答のとおり、(2)にはいる前に(1)の描画を行なうことは出来ないのかもしれませんね。だいぶ諦めがついてきました。 ありがとうございました。

  • Chaire
  • ベストアンサー率60% (79/130)
回答No.4

誤解があるように思われますが、現行の JavaScript で sleep() 関数は「作れません」（ActionScript などを併用する試みなどはありますが、今は考えません）。 A; sleep(10); B; C; と同じことをしたければ、 A; function callback() { 　B; 　C; } setTimeout(callback, 10 * 1000); のように後続処理を全てコールバック関数に入れ、setTimeout() で遅延実行します（正確に 10 秒後にはなりませんが、今は問題にしません）。それまで使っていたコンテキスト情報をどのように渡すか、なども工夫して下さい。 要するに、sleep() を持つ言語系なら内部的にやっている継続渡し的なことを、JavaScript では自前で管理しなければならないということです。それゆえ、上から手続きをだらだら並べるのではなく、きちっと処理単位ごとにブロック化（関数化）する必要があります。まあ、この辺はイベント駆動のコードを弄った経験があればすぐに慣れると思いますし、JSDeferred などのライブラリもあります。 > while (stopTime > (new Date()).getTime()) { 言葉が悪いですが、これは一種のブラクラですので、絶対にやらないで下さい。 ※余談ながら、HTML4/5 で html 要素、body 要素の開始タグと終了タグは省略可なのでサンプルでは不要です。文法的な意味で絶対に必要なのは title 要素の開始・終了タグです。 ※Msxml2.XMLHTTP でバージョンを省略すると 3.0 が使われます。.NET Framework などが入っていれば MSXML 6.0 が入っている可能性が高いと思います。

mibusys
質問者

お礼

ご提示いただいた方法は私がNo.1の補足で書いた内容ですね。 # (3)に当たる処理を関数にして(2)でsetTimeoutする # ということをすれば似た現象を引き起こせると思いますが # 要件を満たせませんし、そもそも関数の自作でもありません。 今回のサンプルのajaxSleepであればまぁまぁいけていると思っていたのですが、JavaScriptでの完全な「sleep関数の自作」は難しいようですね。 ご回答ありがとうございました。

回答No.3

同期通信はsendを行った後、画面描画や利用者（マウス操作やテキストエリアなどへのキー入力など）の処理を行わずにサーバーからの応答を待ち続けます。 質問文中のコードでは、応答があった直後はまだwhile()の中にあるため、そのまますぐに次のopen（同期通信）を行います。 whileでsleepをエミュレートする方法は、あくまで「一定時間待つ」だけであって、待っている間に何かの処理をする（処理が出来る）という物ではありません。 画面描画や利用者の処理を待つ場合は、いったん関数を抜けるか、alert()などでブラウザに処理を渡す必要があります。

mibusys
質問者

お礼

ご回答ありがとうございます。 一点確認させてください。 >whileでsleepをエミュレートする方法は、あくまで「 >一定時間待つ」だけであって、待っている間に >何かの処理をする（処理が出来る）という物ではありません。 そもそもsleepですので処理を待つことが目的です。 待っている間に他の処理をしてもらっては困ります。 ただし、sleepの前の処理は行なってから 待ちを開始してほしいということです。 (1)-(3)の例で言えば (1)を行なってから(2)をしてほしいと、当然とも思える ただそれだけの希望です。 ところが実際には、(1)が反映される前に (2)に進んでしまっているように見えることが問題なのです。 (1)を画面上に反映させてから(2)に進ませるということを、 提示しているプログラムの機能を損なうことなく実現させることは 事実上不可能だというご回答だと理解してよろしいでしょうか？ よろしくお願いします。

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

というか、この質問もしかして、 Ajaxリクエストが完了するまで、”実行中”と表示しておいて、 完了したら”完了”と表示させたいだけなのかしら？ 　だとしたら、変なsleep関数作らなくても、readystateの監視だけでも でけそうな．．．

mibusys
質問者

お礼

# だとしたら、変なsleep関数作らなくても、 # readystateの監視だけでもでけそうな．．． これを読んで、「そういえば普通のajaxアクセスの場合にはonreadystatechangeで表示変更をしたことがあるなぁ」と思って調べてみました。すると、自分の書いたコードで以下の違いがありました。 今回：xmlHttp.open('GET', url, false); 以前：xmlHttp.open('GET', url); 一般的には第3引数を指定しない(もしくはtrueを指定する)から他の処理を継続できる、今回は待たせる為にあえて「false」を指定しているから処理を待ってしまう、という違いがあったことに気がつきました。 この指定の差で画面描画の状態が変わるのだということが分かり、新たな発見が出来、勉強になりました。 ありがとうございました。

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

この現象はなぜ起こるのか。 ＝＞あなたの作られたsleep関数の中で、無意味にxmlHttp.send(null) 　　を繰り返しているため、スクリプトエンジンはinnerHTMLの書き換え 　　指示を出す暇が無いのです。alertを入れると中断するのでその隙に 　　innerHTMLを書き換えることが出来ます。 これを回避する方法はあるかないか ＝＞window.setTimeout/window.clearInterval、とか 　　　window.setInterval/window.clearInterval　を 　　使えば無駄なループを実行しなくても出来ます。 あるのならその方法 省略：上のsetTimeoutとかでNET検索してみてください。

mibusys
質問者

お礼

ご回答ありがとうございます。 >あなたの作られたsleep関数の中で、無意味にxmlHttp.send(null) >を繰り返しているため、スクリプトエンジンはinnerHTMLの書き換え >指示を出す暇が無いのです。 busySleepはその名のとおりCPUリソースを使用し続ける関数です。busySleepについてであればそうかもしれません。 しかしajaxSleepはレスポンス受信を待つ為、(マシン性能や回線速度にもよるとは思いますが)CPUはほとんど消費しません。そのajaxSleepについても同じなわけです。 CPUはほとんど消費していなくても「指示を出す暇が無い」のでしょうか？そういうものなのでしょうか？

mibusys
質問者

補足

> ＝＞window.setTimeout/window.clearInterval、とか > 　　　window.setInterval/window.clearInterval　を > 　　使えば無駄なループを実行しなくても出来ます。 もともとやりたかったことはsleep関数の自作です。sleep関数とは、それを(2)で呼び出すことで(3)以降の処理を待たせることができる関数です。 (1)や(3)の処理部分を書き換えなければならないのであればそもそも要件を満たしていないことになります。 私が掲げた2つの関数はこの要件を満たしています。 (3)に当たる処理を関数にして(2)でsetTimeoutするということをすれば似た現象を引き起こせると思いますが要件を満たせませんし、そもそも関数の自作でもありません。 sleep関数の自作は、おそらくsetTimeoutやsetIntervalでは実現できないのではないかと思います。sleepの自作例として、ここで掲げた2つの方法がよくネット上で見かけた方法です。 また、他にも別ページをダイアログに表示させ指定秒後に閉じることで待たせる方法や、Javaアプレットを使用する方法や指定秒数sleepしてからレスポンスを返すサーバへアクセスする方法などをネット上で見つけましたが、今回はJavaScript単体で実現させたいと思っているためそのような方法は今回はNGです。 もしも、ここに掲げている2つの自作sleep関数以外の方法でsleepが実現できるのであればそれも教えていただきたいです。 よろしくお願いします。

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

関連するQ&A

  • JS初心者です。このコードの式を教えてください

    下記はストップウォッチのコードとなります 「startTime = startTime + (new Date()).getTime() - stopTime;」 ここの式の意味がわかりません。 startTimeは 「if (!startTime) { startTime = (new Date()).getTime(); }」 の部分で、０秒にセットされている？と思います。 ですのでストップウォッチをスタートした1秒後にストップを作動させ、再度スタートさせるときの時間は 「startTime = startTime + (new Date()).getTime() - stopTime;」つまり 「startTime = ０秒 + (new Date()).getTime() - 1秒;」 と言い換えられると思います。単純に考えて1秒でストップさせてスタートする時刻も1秒目からですので、自ずと(new Date()).getTime()の中身は２秒になっちゃうと思っているのですが、どこからそのような数字がくるんだよということで絶対に違うと思います。 色々とわかりません。どなたかこの式を教えてください！ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ストップウォッチ</title> </head> <body> <h1>ストップウォッチ</h1> <div id="sec" style="font-size:128px">0.00</div> <input type="button" value="Start!" id="run"> <input type="button" value="Stop!" id="stop"> <input type="button" value="Reset!" id="reset"> <script> (function(){ var startTime, stopTime, running = false, timerId; document.getElementById('run').onclick = function(){ run(); } document.getElementById('stop').onclick = function(){ stop(); } document.getElementById('reset').onclick = function(){ reset(); } function run() { if(running) return; running = true; if (stopTime) { startTime = startTime + (new Date()).getTime() - stopTime; } if (!startTime) { startTime = (new Date()).getTime(); } timer(); } function timer() { document.getElementById('sec').innerHTML = (((new Date()).getTime() - startTime) / 1000).toFixed(2); timerId = setTimeout(function() { timer(); }, 100); } function stop() { if(!running) return false; running = false; clearTimeout(timerId); stopTime = (new Date()).getTime(); } function reset() { if(running) return; startTime = undefined; document.getElementById('sec').innerHTML = '0.00'; } }()); </script> </body> </html>

  • javascriptのストップウオッチのコード

    javascript初級勉強中です。 以下のコードを実行すると(1)小数点第２の動きがおかしい。 　(2)一度リセットボタンを押さないとタイマーが動かない。 という２点の不具合が出ます。 　　どうすれば解決するでしょうか？ <!DOCTYPE HTML> <head> <meta charset="utf-8"> <title>ストップウォッチ</title> </head> <body> <h1>ストップウオッチ</h1> <div id="sec" style="font-size:128px">0.00</div> <input type="button" value="Start!" onclick="run();"> <input type="button" value="Stop!" onclick="stop();"> <input type="button" value="Reset!" onclick="reset();"> <script> var statTime, stopTime, running = false, timerId; function run() { if (running)return; running = true; if (stopTime) { startTime = startTime + (new Date()).getTime() - stopTime; } if (! startTime) { startTime = (new Date()).getTime(); } timer(); //タイマー処理回していく } function timer() { document.getElementById('sec').innerHTML = (((new Date()).getTime()- startTime)/1000). toFixed(2); timerId =setTimeout(function() { timer(); //このタイマー自身を回していく }, 100); } function stop() { if (!running) return false; running = false; clearTimeout(timerId); //timerIdを渡して止める stopTime = (new Date()).getTime(); } function reset() { if (running) return; 　　startTime = undefined; document.getElementById('sec').innerHTML = '0.00'; } </script> </body> </html>

  • innerHTMLで表示完了後に、Ajaxにて通信を実施

    innerHTMLで表示完了後に、Ajaxにて通信を実施 お世話になります。 現在、PHP + Ajax + MySQLでWebアプリケーションを作成中です。 読み込みが既に完了した画面から、 あるイベントにてAjax + PHPにてMySQLからデータを取得し、 その結果を受け取り、innerHTMLにて動的に結果を表示させています。 問題となっているのは、 MySQLからデータを取得するのに時間がかかり、 ２、３秒ほど画面が固まった状態となるため、その対策を実施したいのですが 思うように実現できておりません。 実現したいことは、MySQLからデータを取得する前に、innerHTMLで あらかじめ『しばらくお待ち下さい』のようなメッセージを表示したいのですが 表示される前にMySQLからデータを取得する処理が開始され、 『しばらくお待ち下さい』が表示されません。 以下の方法では、表示されるようです。 (1)メッセージとデータ取得処理の間に確認ダイアログを表示させる。 (2)ウェイト処理を実施 できれば、innerHTMLにて表示が完了されてから、すぐに Ajaxにて通信が開始されるような方法を探しているのですが、 何か方法はありませんでしょうか。 （そもそも、ＤＢからデータを取得する時間にかかりすぎている点は、 今後もSQL文を見直すなど、対策はしたいと考えております。） 少しでもご存知の方がいらっしゃいましたら、 ご教授よろしくお願い致します。 以下に、動作させているイベントを記載致します。 //呼び出されるイベント function test() { var result = document.getElementById("result"); result.innerHTML = "<p>しばらくお待ち下さい...</p>"; //↑↑これが表示されてから、以下の通信を実行させたいのですが、表示されません。 //ここにウェイトするような処理がある場合は、表示されます。 //XMLHttpRequestオブジェクト生成 var xmlhttp = createHttpRequest(); if (xmlhttp == null) { return null; } //サーバに要求 sendRequest(xmlhttp, "POST", "test.php", false, null, getResult); return; } //サーバからの応答をxmlhttpにて受信 function getResult(xmlhttp) { //サーバから出力された文字列をinnerHTMLにて出力 var result = document.getElementById("result"); result.innerHTML = xmlhttp.responseText; return; } 【環境】 ブラウザ：IE8 PHP：5.2 以上、よろしくお願い致します。

    • ベストアンサー
    • AJAX
  • Ajaxの結果のページングの方法

    テキストボックスに文字を入力中に情報を検索し、同一ページに非同期で検索結果を表示する ページを作っています。 ページ自体はPHPで、javascript で XmlHttpRequestを使い、データ検索用のPHPに情報を送り 検索用のページで結果を整形するprint文を作り、xmlhttp.responseText　で結果を表示しています。 この検索結果をページングしようと思い、 jquery.pagination.js　を利用しようと思っております。 http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_pagenation　　(このサイトの下側の物です) 実装してみたところ、なかなか良いところまで行ったのですが、ページを表示した最初の時に、 一件目の結果が反映されません。 ページングで次を押せば二件目が表示され、前のページを押せば一件目の表示がされているので、 結果は取得できているようですが、それぞれの処理のタイミングで、ページロード時に一件目のデータが取得できていないと思っていますが、解決方法が分かりません。 ソースの一部しか載せられませんが、解決方法がお分かりでしたら教えてください。 <!-- 検索のスクリプト --> <script type= "text/javascript"> function createXmlHttpRequest() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else { return null ; } } var xmlhttp = null; var baseTime = new Date(); var c = 0; function query(flg) { var sword = document.getElementById('sword' ).value; var keyword = encodeURI(sword); var elapsed = parseInt((new Date()).getTime() - baseTime.getTime()); baseTime = new Date(); if (elapsed < 200) { return; } if (!xmlhttp) xmlhttp = createXmlHttpRequest(); if (!xmlhttp || xmlhttp.readyState == 1 || xmlhttp.readyState == 2 || xmlhttp.readyState == 3) { return; } if (keyword_save != keyword) { xmlhttp.open( "GET", "search-ajax.php?sword=" + keyword, true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById( "hiddenresult").innerHTML = xmlhttp.responseText; } } xmlhttp.send( null) keyword_save = keyword; } } window.onload = function() { var sword = document.getElementById("sword" ); if (sword.addEventListener) { sword.addEventListener( "keyup", query, false ) } else { sword.attachEvent( "onkeyup", query); } setInterval( "query('1')", 300); } </script> <!-- ページングのスクリプト --> <script type="text/javascript"> $( function() { function pageselectCallback(page_index, jq){ var new_content = $('#hiddenresult div.result:eq(' +page_index+')').clone(); $( '#res').empty().append(new_content); return false ; } function initPagination() { var num_entries = $('#hiddenresult div.result' ).length; // Create pagination element $( "#Pagination").pagination(num_entries, { num_edge_entries: 2, num_display_entries: 8, callback: pageselectCallback, items_per_page:1 }); } $( function(){ initPagination(); }); }); </script >

  • このスクリプトの間違いを指摘してください。

    このスクリプトの間違いを指摘してください。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>test</title> <script type="text/javascript"> <!-- function doCountDown() { setInterval('countDown()', 500); } function countDown() { var now = new Date(); var tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1); var diff = Math.floor((tomorrow.getTime() - now.getTime()) / 1000) + 1; var hour = Math.floor(diff / 3600); diff %= 3600; var min = Math.floor(diff / 60); var sec = diff % 60; document.getElementById('cd').innerHTML= "明日まで、あと" + hour + "時間" + min + "分" + sec + "秒"; } //--> </script> </head> <body onload="javacript:doCountDown();"> <div id='cd'></div> </body> </html> 自動更新のカウントダウンタイマーを作ろうと思ってるのですが....

  • javascriptで困っています。教えてください

    以下のようにjavascriptの内容を書いた外部のテキストファイルを読み込んで、実行しようとしているのですが、うまくいきません。普通にjavascriptを読み込むのは分かっているのですが、このような方法ができないのでしょうか？よろしくお願いします。 <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> </head> <body> <div id="jsbox"></div> <script type="text/javascript"> var jsbox = document.getElementById("jsbox"); //非同期通信///////////////////////////////////////////// var xmlHttp; loadText(); function loadText(){ if (window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); }else{ if (window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else{ xmlHttp = null; } } xmlHttp.onreadystatechange = checkStatus; xmlHttp.open("GET", "http://xxxxxxxxxxxx/js_test.txt", true); xmlHttp.send(null); } function checkStatus(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ var str = xmlHttp.responseText;alert(str); jsbox.innerHTML = str; test_js(); } } ///////////////////////////////////////////////////////////////// </script> </body> </html> テキストファイルをhttp://xxxxxxxxxxxx/js_test.txtに置き、テキストファイルの内容が <script type="text/javascript"> function test_js(){ alert("test"); } </script>

  • javascriptによるプログレスバーの表示制御

    javascriptで任意の処理を実行中に、HTMLのプログレスバーの表示を制御する方法をご教示ください。 ただし、JQueryなどのライブラリは使わないものとします。 実現したい処理は以下です。 (1)：処理開始時にプログレスバーを表示 　（HTMLに定義されている<progress>を表示） (2)：処理A実行 (3)：プログレスバーの進捗を50%に更新 (4)：処理B実行 (5)：プログレスバーの進捗を100%に更新 (6)：処理終了時にプログレスバーを非表示 上記を実現するために、例えば以下のようなコードを書いても、(1)～(6)の全処理が終わった結果が画面に反映されるため、画面上はプログレスバーは表示されません。 <progress id="prog" max="100" value="0" style="display:none">Loading...</progress> <script> //(1)：処理開始時にプログレスバーを表示 document.getElementById("prog").style.display = 'block'; //(2)：処理A実行（仮の処理としてsleep） Sleep(3); //(3)：プログレスバーの進捗を50%に更新 document.getElementById("prog").value = '50'; //(4)：処理B実行（仮の処理としてsleep） Sleep(3); //(5)：プログレスバーの進捗を100%に更新 document.getElementById("prog").value = '100'; //(6)：処理終了時にプログレスバーを非表示 document.getElementById("prog").style.display = 'none'; //Sleepメソッド（テスト用） function Sleep(T){ var d1 = new Date().getTime(); var d2 = new Date().getTime(); while( d2 < d1+1000*T ){ d2=new Date().getTime(); } return; }; </script> プログレスバーの進捗を更新する度に、画面にその内容を反映するにはどのようにしたらよいのでしょうか。

  • Ajaxで表示させると内容が不変

    下記Ajaxでtest.txtを表示できたのですが test.txtの内容を Hello Japan. 変えてもブラウザのキャッシュをクリアしない限り Hello World! が出つづけます。 下記ページにキャッシュ無効のヘッダをつけても同じです。 子の問題を解決する手段を教えてください。 test.txt: Hello World! x.html: <script> var xmlHttp; function loadText() { 　if (window.XMLHttpRequest) 　{ 　　xmlHttp = new XMLHttpRequest(); 　} 　else 　{ 　　if (window.ActiveXObject) 　　{ 　　　xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 　　} 　　else 　　{ 　　　xmlHttp = null; 　　} 　} 　xmlHttp.onreadystatechange = checkStatus; 　xmlHttp.open("GET","test.txt",true); xmlHttp.send(null); } function checkStatus() { if (xmlHttp.readyState==4&&xmlHttp.status==200) { var node = document.getElementById("disp"); node.innerHTML = xmlHttp.responseText; } } </script> <form> <input type="button" value="push" onClick="loadText()"> </form> <div id="disp"></div>

  • TEXTAREA内の改行位置をinnerHTMLで反映させたい

    例えば、 <HTML> <HEAD> <SCRIPT> function send(){ var message = f1.message.value var str = '<HTML>\n<HEAD>\n</HEAD>\n<BODY>\n' str += ''+ message +'\n' str += '</BODY>\n</HTML>' document.frame1.document.body.document.body.innerHTML = str } </SCRIPT> </HEAD> <BODY> <FORM name="f1"> <TEXTAREA rows="10" cols="40" name="message" onChange="send()"></TEXTAREA> </FORM> <IFRAME name="frame1" id="frame1" width="90%" height="350"></IFRAME> </BODY> </HTML> このような記述をして、テキストエリア内に文字を数行にわたって書き込んでも改行はされません。 どのようにすれば改行されるようになりますか？ innerHTMLのところをinnerTEXTとして改行位置に<BR>タグが入るようにするのでもかまわないのですが、、、 どなたかお分かりになる方、ご教授願います。

  • innerHTMLの初期値

    下記のソースがあります。 <SCRIPT TYPE="text/javascript"> <!-- function Change(id){ if(document.all){ document.all.result.innerHTML = document.all(id).innerHTML; }else if(document.getElementById){ document.getElementById('result').innerHTML = document.getElementById(id).innerHTML; } } //--> </SCRIPT> <a href="#" onClick='Change("ih2"); return false'>前</a><br> <a href="#" onClick='Change("ih3"); return false'>次</a><br> <div id="ih2" style="display:none">テキスト1</div> <div id="ih3" style="display:none">テキスト2</div> <br> <span id="result"></span> 前、次のリンクで表示されるテキストが切り替わるようにしているのですが、 クリックする前の段階では何も表示されていない状態です。 そこで、クリックする前でもid="ih2"の「テキスト1」が表示されている状態にしたいのですが、 なかなか出来ません。 functionの前に document.all.result.innerHTML = document.all.ih2.innerHTML; と記述してみましたが駄目でした。 id="ih2"の値を読み込んで表示させたいのですが、 何か良い方法はありませんか。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する