- ベストアンサー
.jsファイルをhtmlと同時に吐き出してページに反映する方法
Perlでhtmlを吐き出す際にjavascriptをhtml内に直接書いているのですが、 これを外部ファイル（.js）にしたいと思います。 しかし、.jsファイルのほうにもログを参照してから、 書き込まなければならない部分があります。 それで.jsファイルを吐き出して、htmlを吐き出したいのですが、 簡単な方法はありますでしょうか。 よろしくお願いいたします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 ＞緯度・経度情報などもdisplay:noneなどでページ内に呼び出しておく感じでしょうか。 そうなりますね。 GoogleMapsApiに詳しくないので検証してませんが一応例を。 テーブルの例 <table id="infoTable" style="display:none;"> <tr><th><a href="ログAのURL">ログA</a></th><td>ログAの経度</td><td>ログAの緯度</td></tr> <tr><th><a href="ログAのURL">ログA</a></th><td>ログBの経度</td><td>ログBの緯度</td></tr> </table> スクリプトでログを扱う部分の例 var tbl = document.getElementById('infoTable'); //以下3行、同じ事を二回する必要はなさそうなので外に出しましたが、 //動作しないようなら addMarkerの前に移して baseicon.shadow = "img/s.gif"; var icon = new GIcon(baseicon); icon.image = "img/0.png"; for(var i=0;tbl.rows[i];i++){ addMarker( new JPoint( tbl.rows[i].cells[1].innerHTML, tbl.rows[i].cells[2].innerHTML), icon, tbl.rows[i].cells[0].innerHTML); }
その他の回答 (2)
- arexis
- ベストアンサー率66% (66/99)
それほど多くない情報だけなら メインのPerlファイルでログを読んで、 HTML出力時に <script src="jsfile.cgi?data=100111001&url1=aaa&url2=bbb"></script> の様にJSファイル打ち出し専用の別CGIにデータを渡すとか。
お礼
ご回答ありがとうございます。 なるほど。そういう手もありそうですね。 参考にさせていただきます。 ありがとうございます。
- steel_gray
- ベストアンサー率66% (1052/1578)
ログを参照せずに済むjavascriptとhtmlの組み合わせ方法を模索してはどうでしょう。 例えば <ul> <li>ログに関連したデータA</li> <li>ログに関連したデータB</li> </ul> このような形でデータをHTML吐き出し時に埋め込んでjavascriptはこれを読み込んで利用する。 無造作にやってしまうとHTMLとして正しくなくなり外部javascript化する意味もなくなってしまいますが、 そのページで必要となるデータならばリストやテーブルとしてページ内に存在するのはむしろ必然だし、 javascriptでそれを非表示にしておいて利用するのはHTML的にも正しく、かつスマートな方法にも成り得ると思います。
お礼
早速のご回答ありがとうございます。 具体的なソースは下記のものになりますが、 緯度・経度情報などもdisplay:noneなどでページ内に呼び出しておく感じでしょうか。 （GoogleMapsAPIのjavascript部分を外部ファイルにしたいです） <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script src="http://maps.google.com/maps?file=api&v=2&key=[ＧｏｏｇｌｅＭａｐｓＡＰＩキー]" type="text/javascript"></script> </head> <body> <!--マップ表示用タグstart--> <div id="map"></div> <!--マップ表示用タグend--> <ol> <li id="logA"><a href="ログAのURL">ログA</a></li> <li id="logB"><a href="ログBのURL">ログB</a></li> </ol> <script type="text/javascript"> //<![CDATA[ function JPoint(x,y) { this.x = x; this.y = y; } JPoint.prototype = GPoint.prototype; var map = new GMap(document.getElementById("map")); // 中心の緯度・経度 var point = new JPoint(139.74542140725, 35.6586219813086); map.centerAndZoom(point,3); var baseicon = new GIcon(); baseicon.iconSize = new GSize(10,10); baseicon.shadowSize = new GSize(10,10); baseicon.iconAnchor = new GPoint(10,10); baseicon.infoWindowAnchor = new GPoint(10,10); // ログA baseicon.shadow = "img/s.gif"; var icon = new GIcon(baseicon); icon.image = "img/0.png"; addMarker( new JPoint(ログAの経度, ログAの緯度), icon, "<a href=\"ログAのURL">ログA</a>"); // ログB baseicon.shadow = "img/s.gif"; var icon = new GIcon(baseicon); icon.image = "img/0.png"; addMarker( new JPoint(ログBの経度, ログBの緯度), icon, "<a href=\"ログBのURL">ログB</a>"); //]]> </script> </body> </html>
お礼
ご回答ありがとうございます。 この方法でいけそうでした。 ありがとうございました。