【おやじのweb技】 html/javascript/css等
winXP+IE6
TopPage表示 /  保 存 /  印 刷 /  Window Resize /  Window Close

t010

リンク文字をクリックするとhtml/js/txtファイルのソースを表示する
(ホームページをブラウザで開かないでhtmlファイルのソースだけみる)

web工房  Copyright(C) 2004 web工房 All Rights Reserved 
このページのトップに戻る /  Window Resize /  Window Close /  最終更新日表示
お詫び windowsXPのSP2をインストールしたらこの技が全く使えなくなりました。
もしかしたらIEの仕樣変更かも知れません。
とりあえず本技は掲載しておきますが、ご承知おき下さい

action


【技t010-1】このファイルのソース表示
表示中のファイル[技t010](t010.htm)のソースコードをテキストエディタ等に表示します
下記のリンク文字をクリックして下さい


ソース表示(1-1) /  ソース表示(1-2)

【技t010-2】他のhtmlファイルのソース表示
[技m010](m004.htm)のソースコードをテキストエディタ等に表示します
下記のリンク文字をクリックして下さい


ソース表示(2)

【技t010-3】html以外のファイルのソース表示
表示中のファイルの[技t010]の外部スクリプトファイル(t010.js)及び
それをテキストファイルにしたソースコードをテキストエディタ等に表示します
下記のリンク文字をクリックして下さい


ソース表示(3-1) jsファイル /  ソース表示(3-2) txtファイル


【htmlファイルソース表示】
指定したURLのソースコードをテキストエディタ等に表示します
テキストフィールドにhtmlファイルのURL(http://www.〜)を記入し[ソース表示]をクリックして下さい



html/htm/js/txtファイルのソース表示が可能です
(指定したURLが存在しない場合や記入ミスの場合はアクションは生じません)

web技

■【技t010-1】このファイルのソース表示
※ソース表示(1-1)と(1-2)は記述表現が異なるだけで同じものです

◆手順(1-1)【スクリプト】---ソース表示(1-1)の場合

※リンク文字の部分を下記のように記述します。
-----次の行から(copy)-----
<a href="#" onClick="location.href='view-source:' + location.href;">
  ソース表示(1-1)</a><br>
-----上の行まで(copy)-----

◆手順(1-2)【スクリプト】---ソース表示(1-2)の場合

※リンク文字の部分を下記のように記述します。
-----次の行から(copy)-----
<a href="#" onClick="location='view-source:' + window.location;">
  ソース表示(1-2)</a><br><br>
-----上の行まで(copy)-----

■【技t010-2】他のファイルのソース表示
※view-source:に続けてパス(http://〜〜)を記述します

-----次の行から(copy)-----
<a href="#" onClick="location.href='view-source:http://www.bestcare.co.jp/〜〜/m004.htm';">
  ソース表示(2)</a><br>

■javascriptを<head>〜</head>に記述する方法
※下記のように記述してリンク文字から実行させることもできますが、例示の方が簡単でしょう。

-----次の行から(copy)-----
<script type="text/javascript">
<!--
function SourseView() {
  location.href="view-source:" + location.href;
}
//-->
</script>
-----上の行まで(copy)-----

【htmlファイルソース表示】
※テスキトフィールドにパスを入力したときに外部スクリプトが入力内容をチェックするようにしています。
※「ソース表示(3)」でこの技の外部jsファイル及びtxtファイルがソース表示されていますので参照して下さい。

解説等

◆もともとview-source:は、htmlファイルをブラウザで開かないでファイルソースをみる、というときに使用するものだそうです。ブラウザのアドレスバーに
  view-source:のあとに続けてhttp://www 〜とファイルのパスを記入し[enter]を押す
と、指定したファイルのソースがテキストエディタ(NotePad)に表示されます。正体不明のサイト等で、htmlファイルをブラウザで開かずにソースだけみる技、ということらしいですが、そういうサイトには近づかない方が無難なような気もします(^^)。

◆インターネット等で「ソース表示」を検索してみると、「javascriptでソースを表示する」というよりは「ソースを表示しないようにできるか」という話題の方が多いようですね。
◆従ってこの技がどんな場面で必要か、ということを考えてみると...
  右クリック禁止で、ツールバー非表示にしてオープンしたウィンドウで、ソースを表示させる
なんてときでしょうが、そもそもソースを表示したくない場合にそんなことをするわけで(^^;;)。まあ、特定の場面での使用、ということになるでしょうか。
※本例の【htmlファイルソース表示】のように使う、というのもありますね(^^)。

◆ブラウザでソース表示されるテキストエディタについて(注意!!)
※ブラウザからソース表示するときに使用するテキストエディタがwindows標準のNotePad(メモ帳)以外のとき、空白のテキストエディタがオープンし、何も表示されない、という問題が生じるかも知れません。スクリプトから実行しても、直接ブウラザのアドレスバーにパスを記述してもダメでした。
※私の場合、ブラウザから起動するテキストエディタを[TeraPad]に設定しています。ウィンドウズの設定用に「窓の手」というフリーソフトを用いればそんな芸当ができます。しかし、その設定のままでは、前述のような現象が生じてソース表示の技がうまく動作しませんでした。
※エディタ側の設定かブラウザの問題かよく判りませんが、使用するエディタをNotePadに変更すると、正常にソース表示するようになりました。ご存じの方がおられましたらご教授いただければ幸いです。

【例示技】
◆[技m004]表のセルにマウスを重ねると背景色・背景画像やフォントが変わる

keyword

◇location.href◇view-source:

history

◇(2004.09.17)txt/jsファイルソースも表示可能であることを例示しました。
◇(2004.09.05)新たに設置しました。

注意

◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----

access count