イベント ハンドラー タグ内の「javascript:」の目的 (ある場合) は何ですか?
-
09-06-2019 - |
質問
私は最近、JavaScript コードをできるだけ多く読んで、JavaScript スキルを向上させるために懸命に努力しています。これをやっていると、時々見たことがあります。 javascript:
HTML 要素タグのイベント ハンドラー属性の先頭に追加されるプレフィックス。このプレフィックスの目的は何ですか?基本的に、以下の間に明らかな違いはありますか?
onchange="javascript: myFunction(this)"
そして
onchange="myFunction(this)"
?
解決
おそらくあなたの例には何もありません。私の理解では、 javascript:
アンカータグ用です(実際のアンカータグの代わり) href
)。これを使用すると、ユーザーがリンクをクリックしたときに、ページ (空白のページ) に戻るナビゲーションを開始せずに、スクリプトを実行できるようになります。 href
と組み合わせて onclick
します)。
例えば:
<a href="javascript:someFunction();">Blah</a>
それよりも:
<a href="" onclick="someFunction();">Blah</a>
他のヒント
イベント ハンドラでは使用しないでください (ただし、ほとんどのブラウザは防御的に機能するため、罰せられることはありません)。また、アンカーの href 属性で使用すべきではないとも主張します。ブラウザが JavaScript をサポートしている場合は、適切に定義されたイベント ハンドラーが使用されます。ブラウザがそうでない場合、JavaScript は次のようになります。リンクが切れて表示されます。私の意見では、その機能を使用するには JavaScript を有効にする必要があることを説明するページ、または JavaScript を必要としないバージョンの機能を使用する必要があることを説明するページを案内する方が良いでしょう。したがって、次のようなものになります。
<a href="non-ajax.html" onclick="niftyAjax(); return false;">Ajax me</a>
編集:javascript: を使用する正当な理由を考えました。ブックマークレット。たとえば、これは Google リーダーに送信して、ページの RSS フィードを表示します。
var b=document.body;
if(b&&!document.xmlVersion){
void(z=document.createElement('script'));
void(z.src='http://www.google.com/reader/ui/subscribe-bookmarklet.js');
void(b.appendChild(z));
}else{
location='http://www.google.com/reader/view/feed/'+encodeURIComponent(location.href)
}
ユーザーがこのブックマークレットを簡単に追加できるようにするには、次のようにフォーマットします。
<a href="javascript:var%20b=document.body;if(b&&!document.xmlVersion){void(z=document.createElement('script'));void(z.src='http://www.google.com/reader/ui/subscribe-bookmarklet.js');void(b.appendChild(z));}else{location='http://www.google.com/reader/view/feed/'+encodeURIComponent(location.href)}">Drag this to your bookmarks, or right click and bookmark it!</a>
href タグ内でのみ使用してください。
それはばかげています。
受け入れられている方法は次のとおりです。
<a href="/non-js-version/" onclick="someFunction(); return false">Blah</a>
しかし、OPに答えるために、通常、使用する理由はありません javascript:
もう。実際、JavaScript イベントはマークアップのインラインではなく、スクリプトから添付する必要があります。でも、それは純粋主義だと私は思います :-D
の起源 javascript:
イベント ハンドラー内の は実際には IE 固有のものなので、ハンドラーに加えて言語も指定できます。それの訳は vbscript
は、IE でサポートされているクライアント側スクリプト言語でもあります。以下にその例を示します "vbscript:".
他のブラウザの場合 (Shadow2531 が言っているように) javascript:
は単なるラベルであり、基本的に無視されます。
href="javascript:..."
DannySmurf が指摘しているように、リンク内で JavaScript コードを実行するために使用できます。
JavaScript:JS コード (onclick 属性など) の は、ブラウザーによってサポートされる場合とサポートされない場合がある (おそらくどこにもない) continue/goto ラベル ステートメントで使用するための単なるラベルです。それはzipzambamかもしれません:その代わり。ラベルが使用できない場合でも、ブラウザはラベルを受け入れるため、エラーは発生しません。
これは、誰かが onclick 属性に役に立たないラベルをスローしている場合、その人はおそらく自分が何をしているのかわからず、単にコピー アンド ペーストしているか、以下の操作の習慣でそれを行っている可能性があることを意味します。
JavaScript:href 属性の は Javascript URI を表します。
例:
javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B
私は JavaScript の権威ではなく、おそらく質問者よりも劣等生ですが、私の知る限り、違いは次のとおりです。 javascript:
URI コンテキストでは接頭辞が推奨/必須であり、引数には JavaScript トリガーと同様に従来の HTTP URL を使用できます。
したがって、私の直感的な答えは次のようになります。 onChange
JavaScript を期待しているため、 javascript:
プレフィックスは冗長です (完全な誤りではない場合)。ただし、次のように書くこともできます。 javascript:myFunction(this)
アドレスバーに を入力すると、その関数が実行されます。なしで javascript:
, 、ブラウザは解釈しようとします myFunction(this)
URLとしてDNS情報を取得し、そのサーバーを参照しようとします...
それはばかげています。
いいえ、それはばかげたものではありません、JavaScript:は実際にリンクの主題としてのみ使用できる疑似プロトコルなので、彼の言うことはまったく正しいです。確かにあなたの提案の方が優れていますが、何よりも最善の方法は、jQuery などのライブラリで使用されているように、目立たない JavaScript テクニックを使用して HTML 要素を反復処理し、プログラム的に動作を追加することです。
基本的に、以下の間に明らかな違いはありますか?
onchange="javascript: myFunction(this)"
そしてonchange="myFunction(this)"
?
あなたが意図したと仮定すると、 href="javascript: myFunction(this)"
, はい、特に JavaScript を使用してコンテンツをロードする場合には、その可能性があります。JavaScript を使用する場合:疑似プロトコルを使用すると、一部の人間とすべての検索エンジンがコンテンツにアクセスできなくなりますが、実際の href を使用し、JavaScript を使用してリンクの動作を変更すると、JavaScript がオフになっているか特定のクライアントで使用できない場合でも、コンテンツにアクセスできるようになります。
フルバ:
の使用 javascript:
で HREF
Firefox やその他のブラウザの「新しいウィンドウで開く」と「新しいタブで開く」を無効にします。
それは「間違っている」わけではありませんが、サイトをナビゲートしにくくしたい場合は...
かどうかはわかりませんが、 javascript:
プレフィックスは、その範囲内にあるものを意味します onevent
属性はありますが、リンクを新しいタブで開こうとするときにアンカータグで煩わしいことはわかっています。の href
フォールバックとして使用する必要があります。 一度もない JavaScriptをリンクに添付します。