今日・昨日あったこと、未来予定？をなんか描いています。管理サイトはこちら→「Function5」と「ふらくたる - FRACTAL -」
プロフィール
なにか
とある昔に、こういうものホームページ用の作成依頼がありました。
・「Ajax」を用いてください。
・客先は出来ています。同じものを作ってください。
・javascriptの「innerHTML」は用いてはダメです。
・作業場での、ネット検索は可能ですか？ → ダメです。
・作業場での、資料書の持ち込みは可能ですか？ → ダメです。
・自宅で、調べてきた結果のUSBメモリの持ち込みは可能ですか？ → ダメです。
・どうやって調べたらよろしいですか？ → ご自由に。
・自宅で調べるのでしょうか？ → ご自由に。
・ここでは何をするのですか？ → さあ？
要は、「作業場ですることが無い」ということでした。
まあ、はらただしかったので、自宅で深夜に調べ、手法を考え、コーディングしました。
様々なサイトで、
一つのファイル構成でありながら、ページ内のタブを切り替えたら情報の表示が変わったり、
ページ内のリロードボタンをすると新しい情報が表示されたりするのもこんな感じかなと思います。
で、
下記がそのときの構文の一文です。
・・・
<script type="text/javascript" src="jquery_1.1.1.js"></script> <!-- jquery.js配布サイトから当時の最新版を取得しました -->
<!-- <div id="result" ～>内に埋め込むjavascript構文 -->
<script type="text/javascript">
<!--
function loadHTMLFile(fName)
{
$("#result").load(fName);
}
//-->
</script>
・・・
<!-- <div id="result" ～>内に表示したいファイル start -->
<a href="javascript:loadHTMLFile('html_test01.html')">html_test01.htmlファイルを読み込み</a><br><!-- <html>タグ始まりからの一通りのhtmlファイル -->
<a href="javascript:loadHTMLFile('html_test02.html')">html_test02.htmlファイルを読み込み</a><br><!-- <body>タグ内に記述する構文のみのhtmlファイルもどき -->
<a href="javascript:loadHTMLFile('text_test01.txt')">text_test01.txtファイルを読み込み</a><br><!-- <body>タグ内に記述する構文のみのhtmlファイルもどきのtxtファイル版 -->
<a href="javascript:loadHTMLFile('text_test02.txt')">text_test02.txtファイルを読み込み</a><br><!-- <body>タグ内に記述する文のtextファイル -->
<!-- <div id="result" ～>内に表示したいファイル end -->
・・・
<!-- ここに表示したいファイルのエリア start -->
<div id="result" style="height:300px; width:400px; overflow:scroll;"></div>
<!-- ここに表示したいファイルのエリア end -->
・・・
以上です。
たったこれだけでした。
<div id="result" ～> には、
html_test01.html と html_test02.html と text_test01.txt は、「それらしく」表示されました。
text_test02.txt は、改行しても、改行無しの表示でした。
弱点は、
直接読み込みの「画像ファイル」は表示されません（バイナリでの先頭情報からファイルの種類は読み込んでいるようです）。
埋め込み用のhtml構文ファイル内に呼び出しの記述をすれば表示できます。
今の最新ブラウザでは、どう表示されるかは、わかりませんが、
ちょっとだけ考えてみると、「え？」という感じで、それらしくなることもあります。
レンタルサーバ等のCGIが使えない環境下で、
自分のホームページをちょっとだけ工夫して表示させたい時は、
ちょっと手法を調べると色々見つかると思います。
※ライブラリ配布元の注意事項は、熟読してくださいませ。
・「Ajax」を用いてください。
・客先は出来ています。同じものを作ってください。
・javascriptの「innerHTML」は用いてはダメです。
・作業場での、ネット検索は可能ですか？ → ダメです。
・作業場での、資料書の持ち込みは可能ですか？ → ダメです。
・自宅で、調べてきた結果のUSBメモリの持ち込みは可能ですか？ → ダメです。
・どうやって調べたらよろしいですか？ → ご自由に。
・自宅で調べるのでしょうか？ → ご自由に。
・ここでは何をするのですか？ → さあ？
要は、「作業場ですることが無い」ということでした。
まあ、はらただしかったので、自宅で深夜に調べ、手法を考え、コーディングしました。
様々なサイトで、
一つのファイル構成でありながら、ページ内のタブを切り替えたら情報の表示が変わったり、
ページ内のリロードボタンをすると新しい情報が表示されたりするのもこんな感じかなと思います。
で、
下記がそのときの構文の一文です。
・・・
<script type="text/javascript" src="jquery_1.1.1.js"></script> <!-- jquery.js配布サイトから当時の最新版を取得しました -->
<!-- <div id="result" ～>内に埋め込むjavascript構文 -->
<script type="text/javascript">
<!--
function loadHTMLFile(fName)
{
$("#result").load(fName);
}
//-->
</script>
・・・
<!-- <div id="result" ～>内に表示したいファイル start -->
<a href="javascript:loadHTMLFile('html_test01.html')">html_test01.htmlファイルを読み込み</a><br><!-- <html>タグ始まりからの一通りのhtmlファイル -->
<a href="javascript:loadHTMLFile('html_test02.html')">html_test02.htmlファイルを読み込み</a><br><!-- <body>タグ内に記述する構文のみのhtmlファイルもどき -->
<a href="javascript:loadHTMLFile('text_test01.txt')">text_test01.txtファイルを読み込み</a><br><!-- <body>タグ内に記述する構文のみのhtmlファイルもどきのtxtファイル版 -->
<a href="javascript:loadHTMLFile('text_test02.txt')">text_test02.txtファイルを読み込み</a><br><!-- <body>タグ内に記述する文のtextファイル -->
<!-- <div id="result" ～>内に表示したいファイル end -->
・・・
<!-- ここに表示したいファイルのエリア start -->
<div id="result" style="height:300px; width:400px; overflow:scroll;"></div>
<!-- ここに表示したいファイルのエリア end -->
・・・
以上です。
たったこれだけでした。
<div id="result" ～> には、
html_test01.html と html_test02.html と text_test01.txt は、「それらしく」表示されました。
text_test02.txt は、改行しても、改行無しの表示でした。
弱点は、
直接読み込みの「画像ファイル」は表示されません（バイナリでの先頭情報からファイルの種類は読み込んでいるようです）。
埋め込み用のhtml構文ファイル内に呼び出しの記述をすれば表示できます。
今の最新ブラウザでは、どう表示されるかは、わかりませんが、
ちょっとだけ考えてみると、「え？」という感じで、それらしくなることもあります。
レンタルサーバ等のCGIが使えない環境下で、
自分のホームページをちょっとだけ工夫して表示させたい時は、
ちょっと手法を調べると色々見つかると思います。
※ライブラリ配布元の注意事項は、熟読してくださいませ。
PR
