- ベストアンサー
外部からファイルを読み込んだページを作りたい
HTMLページを作っているのですが以下のようなことは実現できないでしょうか。 (1)HTMLの"タイトル"に表示する文字列を、外部のテキストから読み込む。 (2)外部のテキストを更新すれば、(1)のHTMLの"タイトル"も変更される。 この様なHPを作りたいと考えています。 たとえば <title>こんにちわ</title> とべた打ちするのではなく、 titletext.txtというファイルに「こんにちは」と入力し、 <title></title>内にその内容（こんにちはという文字）を読み込むようにしたいです。
- kurigara_k
- お礼率39% (56/141)
- JavaScript
- 回答数9
- ありがとう数7
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
＃５です。ご指導有難うございます。 ファイルを得る程度ならこれでも可？ var getFile = (function( create ) { return function ( file_name ) { var ajax = create( ); if( ajax ) { ajax.open( 'GET', file_name, false ); ajax.send( null ); return ( 200 == ajax.status ) ? ajax.responseText: 'Error'; } return false; }; })( function ( ) { try { return new XMLHttpRequest } catch(e1) { try { return new ActiveXObject( 'Msxml2.XMLHTTP.6.0' ) } catch(e2) { /* try { return new ActiveXObject( 'Msxml2.XMLHTTP.3.0' ) } catch(e3) { */ return null; } } // } } );
その他の回答 (8)
- Chaire
- ベストアンサー率60% (79/130)
例えば XInclude を使います。XInclude は XML を結合する規格であり、名前空間接頭辞や実体参照、基底 URI の修正など、XML に特有の情報項目も調整してくれます。 https://developer.mozilla.org/en/XInclude ここに Firefox/Mozilla 用の簡単なコードがあります。xpointer() が不要なら、この程度でも十分でしょう。XInclude の書式は標準化されていますから、JavaScript でなく、後で PHP や C++ で処理したくなった場合にもそのまま使えます。 http://www.amplesdk.com/ample/ Ample SDK には IE（および HTML）でも動作する XInclude 処理系があります。実際には xpointer() はおろか parse="text" すら未対応ですが、フォールバック機能と、script 要素を利用した内容退避は、文書の再利用に役立ちます。 <title xmlns="http://www.w3.org/1999/xhtml"> <script type="application/ample+xml"> <xi:include href="title.xml" xmlns:xi="http://www.w3.org/2001/XInclude"> <xi:fallback>読み込み失敗時の内容</xi:fallback> </xi:include> </script> </title> ここで問題があるとすれば、No.1 の指摘通り、HTML4/XHTML1 および X/HTML5 で、title 要素内の script 要素が妥当性違反であるということです。かと言って、title 要素ごとインクルードしても、元の文書に title 要素がなくては、やはり妥当性違反です。 どのレベルで検証するかが問題なのですが --- XInclude は、実行後のソースには何の痕跡も残しません。上記を XInclude 処理し、仮に読み込みに失敗したとしても、残るのは <title xmlns="http://www.w3.org/1999/xhtml"> 読み込み失敗時の内容 </title> だけとなります。もちろん、これは検証をパスします。ほとんどの場合、妥当性検証が必要なのは処理後のデータですから、これを HTML4 の『HTML 文書は、どの SCRIPT 要素の処理前も処理後も、HTML DTD に適合するよう制約される』（18.2.4）への言い訳とします。 もっとも、こうした結合処理をクライアント側でやっても、No.3 が仰るようにメリットはほとんどありません。サーバ側で処理するか（であれば PHP の DOMDocument->xinclude の方が手っ取り早いですが）、もしくはあらかじめ手元で結合＆検証を一括して行い、その結果をアップロードするのが賢明と言えます。 少なくとも、JavaScript が動作しないとタイトルすら得られないのでは、ページを保存するだけでタイトルが分からなくなります。検索エンジンに対しても致命的でしょう。一括置換ソフトを利用するなど、他の方法を探すことをお勧めします。 To No.5: MSXML のバージョンと JScript のバージョンは無関係です。また、Microsoft.XMLHTTP は MSXML 2.x 以前のもので、現在メンテナンスが終了しているため、使用しないで下さい。かつ、MSXML 3.0 からはデフォルトバージョンが 3.0 になりましたので、Msxml2.XMLHTTP.6.0 のようにバージョンを明示しないと適切なものを呼び出せません。 また、ActiveX が無効、あるいは与えられた ProgID が無効なときに new ActiveXObject すると例外が発生しますので、必ず try...catch して下さい。ついでに、JScript 5.7 以下で ActiveXObject を使うのなら、onreadystatechange を使い終えた後 new Function で上書きする等して循環参照を切って下さい。
お礼
詳しい回答ありがとうございました。
- cmc32000
- ベストアンサー率41% (103/251)
No4の追加です。ついでに実験してみました。 <HEAD>と</HEAD>の間に、 <script language=Javascript> document.write("<TITLE>" + mesg + "</TITLE>"); と入れれば、少なくともIEではページタイトルもテキストファイルから読み込ませられました。
お礼
ありがとうございました。
- cmc32000
- ベストアンサー率41% (103/251)
No4にスペルミスがありました。 ver は var です。失礼しました。
- babu_baboo
- ベストアンサー率51% (268/525)
ごめん！ちゃんとしたajaxのらいぶらりーでもつかってね ただしいのか、さっぱりわかりませんが・・・^^; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="application/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TEST</title> </head> <body> <p>びみょう</p> <script type="text/javascript"> //@cc_on @set @v = @_jscript_version; if(! /^http/.test( location.href ) ) alert( 'この環境じゃ動かない' ); function getFile ( file_name ) { var text = null; var ajax = /*@if (@v < 5.6) null @elif( @v < 5.7 ) new ActiveXObject( 'Microsoft.XMLHTTP' ) @elif( @v < 5.8 ) new ActiveXObject( 'Msxml2.XMLHTTP' ) @else@*/ new XMLHttpRequest( ) /*@end@*/; if(! ajax ) return null; ajax./*@if(@v) onreadystatechange @else@*/ onload /*@end@*/ = function( ) { if( 4 == ajax.readyState ) { if( 200 == ajax.status ) text = ajax.responseText; if( 404 == ajax.status ) text = '[Error!! File is not found.]'; } }; ajax.open( 'GET', file_name, false ); ajax.send( null ); return text; } document.title = getFile( 'title.txt' ); </script> </body> </html>
お礼
詳しい回答ありがとうございました。
- cmc32000
- ベストアンサー率41% (103/251)
No1の回答者です。 もっともシンプルな例として、書きます。 1.メモ帳で、ver mesg="こんにちは"; の1行を、titletext.txt で保存します。 2.htmlファイルの中に、 <script language="Javascript" src="titletext.txt"></script> <script language="Javascript">document.write(mesg)</script> を書き込みます。これで、titletextに書き込んだ内容が表示されます。htmlのscript文の2行目は、メッセージを書きたい場所に置きます。1行目は、これより前の<head></head>の中に書くと良いでしょう。 ローカルでの実行には、ブラウザのセキュリティを変更します。
お礼
ありがとうございました。
- zxcv0000
- ベストアンサー率56% (111/196)
No.1 さんのおっしゃるとおり、それをJavaScriptで実現するには Ajax を使います。 ただし、その「外部ファイル」のありかがそのHTMLのある Webサーバー以外なら、簡単にはできません。 しかし、その処理は普通は JavaScript では無く CGI等のサーバーサイド処理で行います。 (SSI でもできますが、お勧めはしません) サーバーサイド処理は、Perl CGI にしろ PHP にしろ、「クライアントに返送する HTML の生成」を行います。 そのついでに外部ファイルを読んでTITLEタグに挿入するのは何でもない処理です。 それに対して Ajax でやった場合、クライアントのWebブラウザはHTMLの読込処理とは別にサーバーにリクエストを送ってレスポンスを読まにゃなりません。 サーバーにもそれに応答する負荷がかかります。 という訳で、サーバーサイド処理をお勧めします。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
「ajax」で検索してみて下さい。 「javascript CSI」で検索すると専用のツール（ライブラリ）が見つかりますが、中身はAjaxそのものです。
- cmc32000
- ベストアンサー率41% (103/251)
javascriptの外部ファイルを読み込ませることで可能ですが、<title>タグの中で使うことは出来ないでしょう。 テキストファイルに、変数を定義する文を書き、それをスクリプトファイルとして読み込ませ、Document.write(変数名)を実行させます。 これを、titleタグの中では実行できませんが、<body>の中では使えます。
お礼
ありがとうございます。 Document.write(変数名) を使うんですね。 図々しい質問なのですが、サンプルが載せられたページとかってないですか？ 調べてみたのですが、やりたいこと(外部からファイルを読み込む)が乗っているページを見つけることが出来ませんでした。
お礼
詳しい回答ありがとうございました。