質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1712閲覧

XMLHttpRequest()で展開したテキストファイルの中に記述しているJavaScriptを実行させたい

famaki

総合スコア14

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2016/07/02 04:55

編集2016/07/02 05:14

###前提・実現したいこと
XMLHttpRequest()で展開したテキストファイルの中に記述しているJavaScriptを実行させたい

###発生している問題・エラーメッセージ
下記④の※が実行されません(画面には「メンバーの一覧ここまで」のみ表示されます)。

###該当のソースコード
①css

div#mainBody {}

②htmlソース

<body> <input type="button" value="PAGE1" onclick="loadText('page1.txt');" /> : <div id="mainBody"></div> : <body>

③JavaScript(一部省略しますが"mainBody"に url で示すテキストファイル(page1.txt)を展開・・・)

loadText( url ){ var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { document.getElementById("mainBody").innerHTML = xhttp.responseText; } }; xhttp.open("GET", url, true); xhttp.send(); }

④page1.txt

<p>メンバーの一覧<br> <table><tbody><script language="javascript"><!-- for( i=1; i < memData.length-1; i++ ){ //※ dumpMem( i ); //※ } //※ //--></script></tbody></table>ここまで</p>

###試したこと

<body> : <div id="mainBody"> <p>メンバーの一覧<br> <table><tbody><script language="javascript"><!-- for( i=1; i < memData.length-1; i++ ){ dumpMem( i ); } //--></script></tbody></table>ここまで</p> </div> : <body>

と書けば、dumpMem()内のdocument.write(" <tr> ");・・・が実行され、意図した内容が表示されます。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
GoogleChromeでもIEでも同じ事象です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shi_ue

2016/07/02 05:02

コードブロック(```)で囲ってください。質問の編集をして、編集欄の上にあるツールバーの </> っいうボタンを押して出来た要素内にコードを書いてください。
kei344

2016/07/02 05:06

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
kei344

2016/07/02 05:16

編集ありがとうございます。記述が省略されすぎているため、ただのコピーミスかもしれませんが、上記コードではエラーが発生すると思います。Chromeのデベロッパーツールなどでエラーを確認し、質問文に追記いただけませんか?
guest

回答2

0

innerHTML で入れた scriptタグは実行されません。全体がわからないのですが、コードの作り方を考え直されることをお勧めします。

【javascript - innerHTMLに入れたコードの中にscriptタグがあっても実行されないのはなぜ? - スタック・オーバーフロー】
http://ja.stackoverflow.com/questions/2756/innerhtmlに入れたコードの中にscriptタグがあっても実行されないのはなぜ

投稿2016/07/02 05:29

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

famaki

2016/07/02 07:42

ご教授ありがとうございます。また、質問の仕方が稚拙だったことをお詫びします。 ・・・ 地域の同業者で作る団体のホームページがありまして、その更新の世話役が回ってきました(正直、HPを作る?書く?初めてです)。 更新と言っても「催事」などの記事(見出し、画像数枚、簡単な文章からなる定型的な内容)を差し替える程度です。cssで「枠」の形や場所を決めておいて、あとは①記事(=1ページ)に対応したボタンを画面の左枠に<li>で追加する、②記事は「本文」だけ書いて(例:160702.txt)、ボタンが押されたら「枠」の中だけ差し替える…そういう仕掛けを最初に作ってしまえば楽かな?ということで、そのレベルのものは何とか書きました。 この作業の過程で、会員のデータをもとに…会員番号を与えると名前と電話番号を返す、あるいは日付と会員番号を与えると名前と電話番号と住所+地図のリンクを返す…そういう目的別の関数もついでに作ったのですが…動かない、というか「枠」の中では使えない…なるほど仕様ならば仕方ありませんが、「○○の一覧」のために独立したソースコードを書くのも管理が面倒そうで悩んでいるところです。 もうすこしあがいてみます、ありがとうございました。
kei344

2016/07/02 12:12

> その更新の世話役が回ってきました JavaScriptで省力化するのはとても良いと思いますが、famakiさんが新規でサイトを作られているのではない場合、特殊な形(コンテンツを部分的にJavaScriptで呼び出すなど)でサイトを更新されると、引継ぎが難しくなりませんか? 個人的には「省力化」が好きなので、どんどん突き進んで欲しい気もしますが、(更新システムを作ってしまうなど)団体全体の「省力化」も視野に入れるとさらに良いと思います。
famaki

2016/07/04 02:34

アドバイスありがとうございます、とても勇気づけられます。 目下のところソースコードそのものを吐き出すJavaScript関数(dumpMem()に代わるGENdumpMem())で作ったテキストファイルを展開する…という方向で考え直しております。 書式さえ定まれば、あとはGEN~に何を与えて、出てきたファイルをどこに置いて、ソースのどこを直すか…今のところ多くは手作業になってしまいますが、少なくとも私がソースコードのみ「ポン」と渡された時よりもマシになったはずですが、仰るように現実には「難しく」、やはりこの手作業に変わる手順が、あたかも「表計算のデータを入れなおす」ようなノリで最後まで出来てしまう、そういう環境を作りたいと思っています、もちろん会員データの配列もふくめて。 またワケの分からない(分かっていない故の変な)ご相談をするかも知れませんが、その節も、どうかご教授よろしくお願いします。
guest

0

ベストアンサー

すみません、嘘を書いておりました。
mainBodyの中にscriptブロックを置いても、動作はbodyに対してなされてしまいます。

読み込むtextをjavascriptにします。

Javascript

1var txt = "<p>メンバーの一覧<br><table><tbody>"; 2for( i=1; i < memData.length-1; i++ ){ 3 txt += dumpMem( i ); 4 // dumpMemは出力するのではなくhtmlをreturnするようにする 5} 6txt += "</tbody></table>ここまで</p>"; 7document.getElementById("mainBody").innerHTML = txt;

読み込みもとでは、

Javascript

1var ele = document.createElement('script'); 2ele.id = "addScript001"; 3ele.innerHTML = 読み込んだtext; 4if (document.getElementById(ele.id)) { 5 document.getElementById(ele.id).remove(); 6} 7document.body.appendChild(ele); 8```ってやります。 9「読み込んだtext」は質問にあるようにXMLHttpRequestでやればいいですね。 10 11もう少し整理して「何を」「どうして」外部に持ちたいのか、考えた方がよさそうです。決して省力化にはなりそうもないんですが・・・

投稿2016/07/02 05:07

編集2016/07/02 09:38
shi_ue

総合スコア4437

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

famaki

2016/07/02 07:48

JavaScriptで書いたものを仮にtest.js としますと、 > ele.innerText = 読み込んだtext; この部分は具体的にどのように書くのでしょうか? ご教授よろしくお願いします。
famaki

2016/07/02 08:31

function exeJS( url ) { var ele = document.createElement('script'); // ele.innerText = url; ele.innerText = "document.write('てすと<br>');"; document.getElementById("mainBody").appendChild(ele); } 先ずdocument.writeコードを直に出力…"mainBody"の中ではなくまっさらなソースコードのbodyに「テスト」とだけ…
famaki

2016/07/02 08:38

function exeJS( url ) { var ele = document.createElement('script'); // ele.innerText = "document.write('てすと<br>');"; ele.innerText = "for( i=1; i < memData.length-1; i++ ){ checkTownPage( i ); }"; document.getElementById("mainBody").appendChild(ele); } for文が回りきってcheckTownPage( 最後の要素 );だけの表示になりました…むずかしいですね。
famaki

2016/07/02 08:39

<table>の中に書いてみます。
shi_ue

2016/07/02 08:47

あ、間違ってます。修正しますね。
famaki

2016/07/02 08:54

ele.innerText = "document.write('<table><tbody>'); for( i=1; i < memData.length-1; i++ ){ checkTownPage( i ); } document.write('</tbody></table>');"; ダンマリ…
famaki

2016/07/02 08:57

<td><tr></tr></td>は関数側で出しています。 <table>の中に要素3つ(checkTownPage(1); check…(11); …(21); )みたいに書いてみましたが、エラーが発生しているようです。 js?sensor=false:44 Uncaught TypeError: Cannot read property 'appendChild' of undefined_.cc @ js?sensor=false:44(anonymous function) @ js?sensor=false:45hc @ js?sensor=false:45ic @ js?sensor=false:45(anonymous function) @ js?sensor=false:45hc @ js?sensor=false:45ic @ js?sensor=false:45_.J @ js?sensor=false:45(anonymous function) @ js?sensor=false:46_.G @ js?sensor=false:41mc @ js?sensor=false:46(anonymous function) @ js?sensor=false:125 むむむ、私の手には負えない領域ですね、きっと…
shi_ue

2016/07/02 09:00

もうちょっと、サーバー側でやる処理とクライアント側でやる処理を洗い出したほうがいいですね。ちょっと何がしたいのか分かりません。
famaki

2016/07/02 09:23

「JavaScriptが動いていたhtm」を切り取って作ったテキストを XMLHttpRequest(); で"mainBody"に展開してもJavaScriptは実行されない → 「出力するのではなくhtmlをreturnする」=htmlを吐き出すJavaScriptを実行して、そのhtmlを"mainBopdy"に展開する…ですね? ・・・ 初心者ゆえ「JavaScriptが動いたhtm」なんてのが書けた時点で(下手でも無作法でも)もうそれそのまんま「部品」として使いたい…と思ってしまい、とんだご迷惑を掛けてしまいましたm(_ _)m 教えて頂いた方向で考え直します、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問