- ベストアンサー
HTMLファイルに外部のJavaScriptファイルを呼び出す方法
- HTMLファイルに外部のJavaScriptファイルを呼び出す方法について説明します。
- 具体的な実装方法は、scriptタグ内にsrc属性を指定し、呼び出したいJavaScriptファイルのURLを指定します。
- また、パラメータを渡す場合は、URLにパラメータを追加して、JavaScriptファイル内で取得して処理することができます。
- mirainokai
- お礼率25% (19/76)
- PHP
- 回答数6
- ありがとう数1
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
どうも、結構根が深い話ですね。 ・外部サイトのコンテンツを取り込む ⇒これについては、PHPでは、下記のようにします。 <?php $html = file_get_contents('http://example.com/include.html'); //読み込ませたいURL ?> これで$htmlにコンテンツの内容が全部取得出来ます。 ・取得したコンテンツの一部分を取得したい ⇒正規表現を使うなり何らかのライブラリ（phpQueryとかsimple_html_dom_parserとかそんな）をつかって必要箇所のみ取得してくる必要があります。 この二点をクリアした前提で、 取得した、コンテンツに含まれるCSSと、必要コンテンツを取り込んできて、HTMLに出力する必要があります。 それをJavascriptを使うことで簡単にすまないかと考えたのだと思いますが、 JavascriptでAjax（非同期通信）を行う場合は、外部のドメインないのコンテンツは引っ張れないので、どうにもできません。 $htmlで取得したコンテンツを適当なファイルに保存してキャッシュしてそれをJavascriptでいじるというのも出来ないことはないですが、取得してきたコンテンツ内のCSSのパスが相対パスで記述されていたりしたら、それを結局いじらなければならなかったりと、それなりに面倒が発生すると思います。
その他の回答 (5)
- bm_hiro
- ベストアンサー率51% (200/388)
えーっと、イマイチ把握し切れていませんが、 一応、書き直してみました。 ------------------------------------------------- ○ test.htm を 以下の一行だけに変更。 ------------------------------------------------- <script type="text/javascript" src="./sample2.php"></script> ------------------------------------------------- ------------------------------------------------- ○ sample2.php は変更なし ------------------------------------------------- ------------------------------------------------- ○ include.htm は #4の補足で そちらが書いたものに変更 ------------------------------------------------- ------------------------------------------------- ○ hoge.css を 追加(これも一行のみのファイル) ------------------------------------------------- div { font-style:italic; } ------------------------------------------------- これで、一応 表示はしてくれているものの、 自分自身でも いろいろ 疑問が残るシロモノとなっております。。 IE、Firefox、Safari、Chrome、Slepnir で 動作確認しましたが、 いずれも、 test.htm で、include.htm の内容を表示してくれます。 <body>はしょってもブラウザが補完してくれてるっぽいです。
- bm_hiro
- ベストアンサー率51% (200/388)
> HTMLファイルを呼び出したいと考えています。 > CSSファイルを読み込ませたいのです。 どっちやねーーーーーーーんっ！という俺の心の叫びは置いといて。。。 <link rel="stylesheet" href="hoge.css" type="text/css" /> ↑これでは ダメな理由があって、ここに質問されている事だとは思いますが、 正直、俺の頭では 何をしたいのかが よく分からなくなりました。 既にHTMLのページとして存在しているページのCSSを、 別のページからJavaScriptで読み込んで、別のページのCSSとして使いたいと言うことでしょうか？ もう少し、相手に伝わるように再度 新規にご質問いただくか、他の方の回答をお待ちください。
- bm_hiro
- ベストアンサー率51% (200/388)
#1です。 ちょっと軽く考えすぎていました。 シングルクォート、ダブルクォート、改行コードを細工してやらないといけませんでした。 一応、読み込み対象のHTMLでも ある程度の約束事は必要になるかとは思います。 普通に表示しているページだとすると<html>とかが二重に存在する事になりますので。 と言う事で、検証済みの動くサンプルです。 ------------------------------------------------- test.htm ------------------------------------------------- <html> <head> <script type="text/javascript" src="./sample2.php"></script> </head> <body> </body> </html> ------------------------------------------------- ------------------------------------------------- sample2.php ------------------------------------------------- <?php header("Content-type: application/x-javascript"); $out = implode("" , file("./include.htm")); //$out = implode("" , file("http://www.google.co.jp/")); $out = preg_replace("/\r|\n/" , "" , $out); $out = str_replace("\"" , "\\\"" , $out); $out = str_replace("'" , "\'" , $out); echo "document.write('$out')"; ?> ------------------------------------------------- ------------------------------------------------- include.htm ------------------------------------------------- <div style='background-color:azure;'> 我輩は<font color="red">パンダ</font>である。<br> 名前はまだない。 </div> ------------------------------------------------- sample2.php の 2行目と3行目のURLは どちらか好きなほうで試してみてください。
補足
上記ありがとうございます。 しかし、これではだめなんです。言葉足らずですいません。 include.htm が<div>からになってますが、CSSファイルを読み込ませたいのです。なぜ今回の質問をしたかというと、その部分だけ、出力元のCSSを読み込ませたものを出力したかったからなんです。 なので、<html>が重複するから書いてはいけないという話になると、ちょっと話が変わってきてしまいます。フレームなどで読み込ませるしかないのでしょうか？？
- yambejp
- ベストアンサー率51% (3827/7415)
HTMLにインクルードする仕組みはありません。 したがって、今のようにjavascriptで組み込むか、 html自体がphpとして機能するようにサーバーを設定するかの どちらかになると思います
- bm_hiro
- ベストアンサー率51% (200/388)
んーー、俺の解釈が間違ってたらすみません。 > これを実装すると、「WEB Artisan」が出力されるようになったのですが つまりは、その「WEB Artisan」のところに、そちらの記述したいHTMLを読み込んであげればいいわけですね？ だとしたら、こんな感じです。 <? header("Content-type: application/x-javascript"); $out = implode("\n" , file("読み込みたいHTMLファイル名")); echo "document.write(\"$out\")"; ?> なお、動作確認はしておりません。
補足
ありがとうございます。 ＞つまりは、その「WEB Artisan」のところに、そちらの記述したいHTMLを読み込んであげればいいわけですね？ はい！そのとおりです。 ＞だとしたら、こんな感じです。 <?php header("Content-type: application/x-javascript"); $out = implode("\n" , file("http://hogehoge.com/sample.html")); echo "document.write(\"$out\")"; ?> このように記述し、sample2.phpを生成しました。そして、出力したいファイルに、 <script type="text/javascript" src="http://hogehoge.com/sample2.php"></script> と記述したのですが、何も出力されませんでした。何か間違っている箇所がありますでしょうか。お手数ではございますが、ご確認、よろしくお願いいたします。
補足
見捨てないでください＞＜。説明が言葉足らずでした。 先日アドバイスいただいたものが、 include.htm ------------------------------------------------- <div style='background-color:azure;'> 我輩は<font color="red">パンダ</font>である。<br> 名前はまだない。 </div> だったかと思いますが、私が読み込ませたいのは、 include.htm ------------------------------------------------- <html> <head> <link rel="stylesheet" href="hoge.css" type="text/css" /> </head> <div style='background-color:azure;'> 我輩は<font color="red">パンダ</font>である。<br> 名前はまだない。 </div> </html> なんです。bodyなどははしょってますが、divだけでいいのであれば、javaスクリプトで出力する必要はなく、div styleで表現できないものを他のウェブサイトに出力させたいんです。 これで説明になってるでしょうか。。 すいませんが、ご確認、よろしくお願いいたします。。