人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ajax(xmlhttprequest)で非同期取得したHTMLを、元のHTMLにinnerHTMLで流し込んでいます。
この取得したHTMLの中にJavaScriptがあるのですが、このJavaScriptが動いてくれません。このJavaScriptは外部ファイルに記述されています。
非同期ではなく通常のページに埋め込んで実行(サーバにアップして普通に取得するしてブラウザで表示)した場合は正しく動作しますのでスクリプト自体は問題ないと思われます。
この外部ファイルのJavaScriptを含むHTMLを非同期取得して尚且つスクリプトを走らせる方法はないでしょうか?
なお、該当の外部スクリプトを修正することは出来ません。
このままでは無理な場合は、なにか代案がありましたらお願いします。
(うっすらと思ってるのは、サーバでスクリプトを実行させて結果に置き換えてからHTMLを返すってことかな、とか思うのですが・・・。この方向での回答も是非。ポインター程度でもいいです。)

●質問者: metatron3rd
●カテゴリ:コンピュータ インターネット
✍キーワード:Ajax HTML JavaScript XMLHTTPRequest サーバ
○ 状態 :終了
└ 回答数 : 14/14件

▽最新の回答へ

1 ● irhnhhtn
●30ポイント

自分もベテランではないので、更に良い回答があるかもしれませんが、

自分が作成した事のある仕組みを説明しますと・・・


1.まず、ベースとなるHTMLには、外部Javascriptのリンクを張っておきます。

(これは、あらかじめ静的に設定しておきます。)

<script type="text/javascript" src="hogehoge.js"></script>

2.HttpRequestで動的に読み込むHTML内には、jsファイル内で定義したfunctionを記述しておきます。

(サーバ側で用意するresponse用HTML文字列です。)

3.あとはAjaxロジックで、代入します。

document.getElementById("targetDiv").innerHTML = hogehogehoge.responseText;

◎質問者からの返答

回答ありがとうございます。私もサンプルを拾ってきていじる程度しか出来ない素人ですし、実際に作成されたとの事ですのでご回答を理解できていないのかもしれないのですが・・・

1のように本体に書いてしまったら、本体をブラウザに読み込んだ時点で外部スクリプトが実行されて結果が表示されてしまいます。

なお情報として、このスクリプトは具体的にはBlogPeople提供のトラックバックピープルのスクリプトです。

もしよろしければご回答お待ちしております。


2 ● takemori
●10ポイント

他のサーバ上にあるjavascriptを読み込んで実行することは出来ません

javascriptを一旦サーバーに保管してそれを読み込むようにする

もしくは、iframeを利用してiframe内でHTMLをそのまま表示させる

などの方法を取るといいと思います。


http://amix.dk/greybox/demo.html

Greyboxなど無料で使えるライブラリもあります。

◎質問者からの返答

・フレームは使わない方向で検討したいので、参考にさせていただきますが引き続き回答を待ちたいと思います。

・ご紹介いただいたGreyboxについて、ありがとうございます。

こちらも参考にさせていただきます。


3 ● irhnhhtn
●10ポイント

すみません、inputタグをサンプルコードとして載せたら、そのままボタンが表示されてしまいました。。。 (^-^A

「トラックバックピープルのスクリプト」を探しましたが、どれを指しているのかちょっと分かりませんでした。

(ただ、jsファイルをロードしただけで動き出す、という事は理解しました。)

で、前回の解答とは別の手法として、動的にscriptのsrcをコード上で動的に設定する事ができるみたいです。

ベースとなるHTMLに記述

<script type="text/javascript" src="" id="aaa" ></script>

外部のjsファイルを動的に設定。

document.getElementById("aaa").src = "test.js";

他にもっといい方法がある気がとってもしますが、とりあえず上記を使えば、やりたい事は実現できると思います。

◎質問者からの返答

回答ありがとうございます。

スクリプトを実行したいHTML自体も非同期で取得している為か、取得したHTMLをinnerHTMLしてdocument.getElementById("aaa").src = "test.js";相当のことをさせてみたところ、document.getElementById("aaa") has no propertiesというエラーになりました。

また、実験として親HTMLにsrc=""としたSCRIPTタグを書きました。この親HTMLをロードしただけでSyntaxErrorと出ました。1行目の部分でした。

(この1行目はXHTML1Transitionalの宣言(?)があります。)

とりあえず無視してsrcにスクリプトファイルへのURLを入れてみました。

すると、srcにURLは設定されましたがスクリプトは走りませんでした。

不足情報も多いとは思いますが、私のやり方でもし何かお気づきでしたらご教授いただけますと幸いです。

取り急ぎ現状作成中の本番データで試した為に切り分けとかもさっぱりですので、

まずは簡単な例を作って試してみようと思います。

※エラー出力とは、FirefoxのJavaScriptコンソールに出力されているものです。


4 ● ardarim
●30ポイント

innerHTMLでスクリプトを含むHTMLを挿入する場合は、defer属性を指定する必要があるようです。

http://msdn.microsoft.com/library/default.asp?url=/workshop/...

When using innerHTML to insert script, you must include the DEFER attribute in the script element.

innerHTMLで取り込む前に、文字列の中のscriptタグをサーチして、deferを挿入することで何とかならないでしょうか?

◎質問者からの返答

ご回答ありがとうございます。

まずはdeferと言うものを初めて聞いたので検索してみました。いくつもヒットしましたが、気になったものを抜粋してみます。

・スクリプトが文書の内容となるものを生成しない旨を示す

(http://www.scollabo.com/banban/senior/ref/ref_s.html#s-scrip...)

・この属性を指定すると、スクリプトが文書の内容を生成しないことをユーザーエージェントに伝えることができます。(JavaScriptであれば、document.writeで何かを書き出すようなプログラムがないなど。)ユーザーエージェントはスクリプトの実行を後回しにして、そのまま続けて文書の内容を表示することができます。script要素の中身が多すぎるときなどに有効です。

(http://elastic965.80code.com/html4ref/script)

と言うことなのですが、スクリプトはdocument.writeを実行します。

そして難点と言うか何と言うか、スクリプトは自前のものではなくて公開されているものを使うのみなので、スクリプトをどうにかすると言うことも出来ません。

ただ、それでも試すだけは試そうと言うことでやってみたのですが、ざっとやってみたところやはりスクリプトは走りませんでした。

(エラーらしいものもありませんでしたので実験がおかしいのかもしれませんが)

引き続きこの点も参考にしながら自分でも勉強してみます。


5 ● ardarim
●10ポイント

document.writeを使用しているのですね...


document.writeはDOMの構築が終わった後では正しく機能しないのではないでしょうか。

AJAXではHTMLを非同期に取得するため、HTML取得が完了し、取得したHTMLの中のスクリプトを実行する頃には大元のHTMLのDOMはロードが完了していると思います。そのため、document.writeは実行されているけれども、期待通りにHTML中に動的に埋め込まれないということになるのではないでしょうか。例えば、読み込んだスクリプトがalertだったらちゃんとポップアップするのでは??


1つの対策としてはXMLHttpRequestを同期モードで動作させてみてはどうでしょうか? 同期モードであれば、読み込んだHTMLのスクリプトを処理するタイミングでもまだDOMの構築が途中だと思いますので、正しく動くかもしれません。

◎質問者からの返答

ご回答ありがとうございます。

勝手ながらこちらの返信は割愛させていただきます。


1-5件表示/14件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ