HTMLファイルに外部のJavaScriptファイルを呼び出す方法
- HTMLファイルに外部のJavaScriptファイルを呼び出す方法について説明します。
- 具体的な実装方法は、scriptタグ内にsrc属性を指定し、呼び出したいJavaScriptファイルのURLを指定します。
- また、パラメータを渡す場合は、URLにパラメータを追加して、JavaScriptファイル内で取得して処理することができます。
- ベストアンサー
文系でHTMLしかわからない者です。
文系でHTMLしかわからない者です。 htmlファイルに、 <script type="text/javascript" src="http://hogehoge.com/sample/index.php? param=0"></script> みたいなタグを記述して、HTMLファイルを呼び出したいと考えています。 いろいろサイトをググってみたら下記のようなソースをみつけました。 <?php $param = $_GET['param']; header("Content-type: application/x-javascript"); if ($param == '0') { echo "document.write(\"WEB Artisan\")"; } else { echo "document.write(\"RESTARTSYSTEM\")"; } ?> これを実装すると、「WEB Artisan」が出力されるようになったのですが、ここをhtmlファイルにするにはどうすればいいのでしょうか。 非常に初歩的な質問かもしれませんが、ご指導の程、よろしくお願いいたします。
- 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> と記述したのですが、何も出力されませんでした。何か間違っている箇所がありますでしょうか。お手数ではございますが、ご確認、よろしくお願いいたします。
関連するQ&A
- HTML→PHPへ値を渡して再びHTMLに結果出力
HTMLからPHPへ値を渡して、再びHTMLに結果を表示したいと思っています。 以下のような簡単なコードを書いてみましたが、HTMLのページに"OK"という文字が表示されません。 PHPのパーミッションは755でやっており、PHPが動作するサーバーでテストしています。 どう修正すれば良いのか、アドバイスをお願い頂けますでしょうか？ どうぞよろしくお願い致します。 【HTML】 <html> <head> </head> <body> </body> <script type="text/javascript" src="http://xxx.com/test/jsphptest.php?param=1"></script> </html> 【PHP】 <?php $param = $_GET['param']; header("Content-type: application/x-javascript"); if ($param == '1') { echo "document.write(\"OK\")"; } else { echo "document.write(\"NG\")"; } ?>
- ベストアンサー
- PHP
- ＪａｖａＳｃｒｉｐｔからＰＨＰへのデータの受け渡しについて。
現在、アマゾンＷｅｂサービスを利用して受け取った書籍データをデータベースへ格納したいと考えています。 この書籍情報取得のシステムは全てＪａｖａＳｃｒｉｐｔと別のＣＧＩプログラムの二つで動いており、ＤＢ格納へは一度ＰＨＰへと情報を渡し行わなければならないという事を知り色々と探していたのですが、よく理解できる情報に出会えず行き詰っております。 http://www.res-system.com/weblog/item/383 こちらの情報で、 <script type="text/javascript" src="http://www.res-system.com/weblog/media/1/jsphptest.php? param=1"></script> <?php $param = $_GET['param']; header("Content-type: application/x-javascript"); if ($param == '1') { echo "document.write(\"WEB Artisan\")"; } else { echo "document.write(\"RESTARTSYSTEM\")"; } ?> という上二つのソースで単純にデータの受け渡しが出来ると知り、これが使えないかと思ったんですが、 param=1で渡す値はやってみたのですが文字列や、変数では出来ない様子なのです。 自分はＰＨＰは多少分かりますがＪａｖａＳｃｒｉｐｔは全くの初心者でして、どなたか分かりやすく術を教えて頂けないでしょうか。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- phpの結果をjavaスクリプトタグで表示したい
phpの変数を含んだ処理結果をHTMLに埋めこんだjavaスクリプトタグで表示したいです。 php側のプログラム <?php header("Content-type: application/x-javascript"); $a = array('abc', 'def', 'ghi'); rsort($a); foreach ($a as $tmp) { echo "document.write(\"<P>$tmp</P><br>\")"; } ?> 表示側のHTML <html> <body> <script type="text/javascript" src="http://www.aaa.com/hoge.php"></script> </body> </html> echo "document.write(\"<P>$tmp</P><br>\")"; の箇所が変数でなければ、記入した文字が表示されます。。 例： echo "document.write(\"あああ\")"; 変数に対応した書き方でないと思いますが、、、アドバイスいただけないでしょうか？ よろしくお願い致します。
- ベストアンサー
- PHP
- javascriptとphpの連携で疑問
javascriptの変数をphpに渡すプログラムを、ネットを参考にして次のようなものを作りました。 ●クライアント側 (index.html) <html> <head> </head> <body> <script type="text/javascript" src="j2p.php?parm=1"></script> </body> </html> ●サーバー側 (j2p.php) <?php $parm = $_GET['parm']; header("Content-type: application/x-javascript"); if ($parm == 1) { echo "document.write('1ですよ')"; } else { echo "document.write('1じゃないですよ')"; } ?> 上記は問題なく動作するのですが、サーバー側のプログラムを、次のように 変更し、直接$parmを出力しようとすると何も表示されません。 ●サーバー側 (NG1) <?php $parm = $_GET['parm']; header("Content-type: application/x-javascript"); echo "document.write('<?php echo $parm; ?>')"; ?> どこか、考え方が根本的に間違っているのかも知れませんが、この問題で ずっと悩んでおり、先に進めない状態です。 上記プログラムのおかしな点、改善点など、アドバイスよろしくお願い いたします。
- ベストアンサー
- JavaScript
- adsense広告がphp出力できない
お世話になります。 以下の構文が記載されたPHPをhtmlからjavascriptにて呼び出してます。 が、うまく広告が表示されずに困っています。 PHPを直接叩き、document.write等を削除したものを 直接htmlに貼り付ければ、広告は表示されます。 広告が表示されない原因としては、adsenseのscript内でinframeを作成しているのですが そのさいのwidth,heightが0になってしまっているようです。 しかし、なぜその値が渡せていない？のかが解らずハマっています。 <?php header("Content-type: application/x-javascript"); echo "document.write(\"<div align='center'>\")\n"; echo "document.write(\"<p>\")\n"; echo "document.write(\"<script type='text/javascript'><!--\")\n"; echo "document.write(\"google_ad_client = 'hogehogeID';\")\n"; echo "document.write(\"/* 200*200 */\")\n"; echo "document.write(\"google_ad_slot = 'slotnumber';\")\n"; echo "document.write(\"google_ad_width = 200;\")\n"; echo "document.write(\"google_ad_height = 200;\")\n"; echo "document.write(\"//-->\")\n"; echo "document.write(\"</script>\")\n"; echo "document.write(\"<script type='text/javascript'\")\n"; echo "document.write(\"src='http://pagead2.googlesyndication.com/pagead/show_ads.js'>\")\n"; echo "document.write(\"</script>\")\n"; echo "document.write(\"</p>\")\n"; echo "document.write(\"</div>\")\n"; ?> よろしくお願い致します。
- ベストアンサー
- PHP
- adsenseをjavascriptで出力したい
お世話になります。 以下の構文が記載されたPHPをhtmlからjavascriptにて呼び出してます。 が、うまく広告が表示されずに困っています。 PHPを直接叩き、document.write等を削除したものを 直接htmlに貼り付ければ、広告は表示されます。 広告が表示されない原因としては、adsenseのscript内でinframeを作成しているのですが その歳のwidth,heightが0になってしまっているようです。 しかし、なぜその値が渡せていない？のかが解らずハマっています。 <?php header("Content-type: application/x-javascript"); echo "document.write(\"<div align='center'>\")\n"; echo "document.write(\"<p>\")\n"; echo "document.write(\"<script type='text/javascript'><!--\")\n"; echo "document.write(\"google_ad_client = 'hogehogeID';\")\n"; echo "document.write(\"/* 200*200 */\")\n"; echo "document.write(\"google_ad_slot = 'slotnumber';\")\n"; echo "document.write(\"google_ad_width = 200;\")\n"; echo "document.write(\"google_ad_height = 200;\")\n"; echo "document.write(\"//-->\")\n"; echo "document.write(\"</script>\")\n"; echo "document.write(\"<script type='text/javascript'\")\n"; echo "document.write(\"src='http://pagead2.googlesyndication.com/pagead/show …\")\n"; echo "document.write(\"</script>\")\n"; echo "document.write(\"</p>\")\n"; echo "document.write(\"</div>\")\n"; ?> adsenseコード中にコメントが使用されているのですが このあたりが怪しいと思いますが・・・ 博識な方、よろしくお願い致します。
- 締切済み
- JavaScript
- JavaScriptからPHP呼び出しHTML出力で…
現在phpにてブログのカテゴリリストを取得して、投稿ページ （HTML）上にカテゴリのプルダウンを表示しようと試みている のですが、JS(JavaScript)からPHPを呼び出しHTML上に出力する 際にPHPファイルにincludeがあるとjavascriptエラーとなって しまいます。 ちなみに参考にしたホームページはこちらです。 http://www.res-system.com/item/383 PHPソース（init.php）↓ <?php include_once('entry.php'); // ←エラーの箇所 // ヘッダ header("Content-Type: application/x-javascript; charset=UTF-8"); // インスタンス生成 $obj = new XMLComm(); // 初期設定 $obj->XMLComm(); // カテゴリ取得 echo "document.write(\"$obj->getCategories()\")"; ?> HTMLソース（entry.html）↓ <HTML> <HEAD> <TITLE>BLOG ENTRY</TITLE> </HEAD> <BODY> ブログエントリー</br> <script type="text/javascript" src="/init.php"></script> </BODY> </HTML> ちなみに、include等が無い状態で任意の文字で試したのですが こちらはきちんと表示されます。 javascriptでincludeなど呼び出しているphpを起動することは できないのでしょうか… 解決策、別案などありましたらご教授いただけたら幸いです。 phpを始めたばかりの初心者で、質問自体おかしい点があるかも しれませんが、、どうぞよろしくお願いいたします。
- ベストアンサー
- PHP
- htmlからPHPを呼び出す方法について教えてください
<script type="text/javascript" src="/init.php"></script> 楽天商品検索APIを利用したブログパーツの作成をPHPにて行っております。 公開されているサンプルソースを元にブログ上に指定したキーワードの 検索結果を表示させるPHPを作成しております。 HTML側にてPHPを呼び出す際に、PHPに記述したHTMLのソースを document.writeで囲って出力しようとしておりますが上手くいきません。 呼び出し側 <script type="text/javascript" src="/test.php"></script> ■test.php <?php //PHPソース(省略) $str_test = 'zzzzz'; header("Content-Type: application/x-javascript; charset=UTF-8"); echo " document.write(\"<table width=\"100%\" border=0 cellspacing=1 cellpadding=5 style=\"font-size:12px;\">\") document.write(\" <tr style=\"background-color: #ffffff;\">\") document.write(\" <td width=\"8%\" align=\"center\" rowspan=\"4\">\") document.write(\" abcde\") document.write(\" </td>\") document.write(\" <td width=\"8%\" align=\"center\" rowspan=\"4\">\") document.write(\" $str_test\") document.write(\" </td>\") document.write(\" </tr>\") document.write(\"</table>\") "; ?> 上記の様にダブルクォートをエスケープしたのですが 呼び出し側には何も表示されませんでした。 document.writeにて下記の様に記述した場合は表示されましたので 上記ソースの何処かが間違っているのは分かったのですが そこから先に進めず困っております。 ■表示された例 echo " document.write(\"$str_test\") "; 解決策、別案などありましたらご教授いただけたら幸いです。 どうぞよろしくお願いいたします。
- ベストアンサー
- PHP
- javascriptで2箇所のphpの関数を取得したいのです。
javascriptで2箇所のphpの関数を取得したいのです。 見よう見まねでやっている初心者です。よろしくお願いします。 javascriptにてphpの関数をよびだしてhtmlのinput type="text"に値を出力しようとしています。 ２か所のphp を下記のようにhtmlに書いて取得しようとしたのですがどちらか一方しか取得できません。 なんとか両方を読み込めるようにできないでしょうか？分かりにくい質問かと思いますので例を書いて見ましたのでどうかよろしくお願いいたします。 (例） <script type="text/javascript" src="../data/zzz.php?aaa=abc" ></script> <script type="text/javascript" src="../../../data/xxx.php?bbb=abc" ></script> 上記のように書いても片方しか取得しないようです。 以下../dataのzzz.phpのphｐです。 <?php $aaa = $_GET['aaa']; header("Content-type: application/x-javascript"); echo "window.onload = function () {"; if ($aaa== 'abb') {echo "document.getElementById(\"xxx\").value=100;","document.getElementById(\"yyy\").value=1;";} elseif ($aaa == 'abc') {echo "document.getElementById(\"tanka\").value=120;","document.getElementById(\"yyy\").value=2;";} echo "}"; ?> 以下../../../dataのxxx.phpのphｐです。（例） <?php $bbb = $_GET['bbb']; header("Content-type: application/x-javascript"); echo "window.onload = function () {"; if ($bbb== 'abb') {echo "document.getElementById(\"zzz\").value=50;","document.getElementById(\"vvv\").value=10;";} elseif ($bbb == 'abc') {echo "document.getElementById(\"tanka\").value=51;","document.getElementById(\"vvv\").value=20;";} echo "}"; ?> 以上２か所のディレクトリのphpを取得したいのですが、これはできない事なのでしょうか？ちがうディレクトリから取得しなければ更新作業が大変になってしまうのです。どうかよろしくお願いいたします。
- ベストアンサー
- PHP
- Javascriptの関数をPHPで作りましたが戻値を得る方法がわかりません。
はじめまして。xpにxamppの環境で利用してます。 PHPをjavascriptの関数に出来ると知り、 geturl.php <?php header("Content-type: application/x-javascript"); echo "function picturl() {"; ～ MySQLを特定の条件で検索し、画像の保存先URLを$urlへ格納 ～ echo "}"; ?> showpict.html <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <title>photo</title> <script type="text/javascript" src="geturl.php"></script> <script type="text/javascript"> ~以下でたとえば、 var url = picturl(); とすれば url に 値が入るかと思って作成して見ました。 PHPの$urlには、 ./data/001.png のような値が入ります。 私が参考にしたPHP文では戻値は変数ではなく生のテキストで echo "document.write(\"文章\")"; となっており、これは実行できました。 変数を使用して上記のような値を求めようとしたところ、 echo "document.write(\"$url\")"; echo "retuen $url"; などを試してみましたがうまくいきません。 この様な方法では利用できないものなのでしょうか？。 それともecho文が以外の方法で行うものなのでしょうか？。 よろしくご協力のほどお願いいたします。
- ベストアンサー
- PHP
補足
見捨てないでください＞＜。説明が言葉足らずでした。 先日アドバイスいただいたものが、 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で表現できないものを他のウェブサイトに出力させたいんです。 これで説明になってるでしょうか。。 すいませんが、ご確認、よろしくお願いいたします。。