HTMLでhrefの代わりにJavaScript関数を呼び出す方法


86

HTMLのモックアップがあります

<a href="javascript:ShowOld(2367,146986,2)"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>

リクエストを送信したときにサーバーから応答を受け取りました。

このモックアップを使用して、コードをサーバーに送信するAJAXリクエストの応答として取得しました。

さて、すべてが順調ですが、リンクをクリックすると、ブラウザはリンクとして関数を開きたいと思っています。クリックした後、アドレスバーが次のように表示されます。

javascript:ShowOld(2367,146986,2)

これをFirebugで実行したい場合は、ブラウザのURLを意味します。誰かがリンクをクリックすると、ブラウザはブラウザでそれらを開こうとするのではなく、DOMにすでにロードされている関数を呼び出そうとします。


同様の質問は、Stackoverflow自体で回答されています。stackoverflow.com/questions/1070760/…–
Scaria Sebastian

回答:


192

その構文は問題なく機能するはずですが、この代替手段を試すことができます。

<a href="javascript:void(0);" onclick="ShowOld(2367,146986,2);">

または

<a href="javascript:ShowOld(2367, 146986, 2);">

文字列値の更新された回答

文字列を渡す場合は、関数のパラメータに一重引用符を使用してください

<a href="javascript:ShowOld('foo', 146986, 'bar');">

引数で二重引用符をエスケープする文字列を渡す方法は?H =例には整数のみが含まれています。
jeffry copps 2018

1
@jeffrycoppsは、あなたの関数内の単一引用符を試す
ineedme

@ineedmeAnswerその情報で更新されました。ありがとう。
Dutchie4 3219

9

「クリックイベントハンドラー」しかない場合は、<button>代わりに使用してください。リンクには特定の意味があります。

例えば:

<button onclick="ShowOld(2367,146986,2)">
    <img title="next page" alt="next page" src="/themes/me/img/arrn.png">
</button>

ボタンをボタンではなくリンクのように見せるための方法はありますか?
ベンページ

@Ben Page:はい、CSSを使用します。少なくとも、適切な近似値が得られます。私の答えは、ここでコメントを参照してください:stackoverflow.com/questions/4842953/or-javascriptvoid0/...
フェリックスクリング

7

javascriptを目立たないようにしてください:

  • href属性で実際のリンクを使用する必要があります
  • クリックイベントにリスナーを追加してajaxを処理します

hrefオプションです。省略してください。
Hart

タグはアンカーです。リンクは必要ありません。
Colin't Hart

5

スパンで小さなCSSを使用して、次のようなリンクのように見せます。

CSS:

.link {
    color:blue;
    text-decoration:underline;
    cursor:pointer;
}

HTML:

<span class="link" onclick="javascript:showWindow('url');">Click Me</span>

JAVASCRIPT:

function showWindow(url) {
    window.open(url, "_blank", "directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes");
}

上記の「url」関数パラメーターは、実際のurlの代わりに文字列「url」を提供します
visrahane 2018年

実際のURLをshowWindow関数に入れることになっています。例:javascript:showWindow( ' stackoverflow.com');
tolsen64 2018年

domを使用して作成していて、URLを制御できないため、ハードコーディングできません
visrahane 2018年

3

また、JavaScriptをHTMLから分離する必要があります。
HTML:

<a href="#" id="function-click"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>

javascript:

myLink = document.getElementById('function-click');
myLink.onclick = ShowOld(2367,146986,2);

ShowOld関数の最後の行が次のとおりであることを確認してください。

return false;

これにより、ブラウザでリンクが開かなくなります。


hrefオプションです。省略してください。
Hart


1

hrefa要素の場合はオプションです。

使用するだけで十分です

<a onclick="ShowOld(2367,146986,2)">link text</a>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.