URL から JavaScript 関数を呼び出す

Muhammad Muzammil Hussain 2023年1月30日 JavaScript JavaScript Function JavaScript Browser
  1. ブックマークレットを作成する
  2. Google Chrome でのブックマークの作成
  3. MozillaFirefox でのブックマークの作成
URL から JavaScript 関数を呼び出す

Web ページには通常、特定のページソース内に JavaScript 関数が含まれています。

正規表現をチェックするフォーム検証など、Web ページ機能のハイパーリンクとしてスクリプト関数またはメソッドを含める方法はありません。ただし、ブックマークレットを使用して、アドレスバーから JavaScript 関数をすばやく実行できます。

ブックマークレットは、デフォルトで最も人気のあるブラウザで利用できます。この記事では、Google Chrome や Mozilla Firefox などの一般的なブラウザでのブックマークレットの機能と、その機能を使用して Web ページを開く代わりに URL から JavaScript 関数を呼び出す方法について説明します。

ブックマークレットを作成する

ブックマークごとにブックマークレットを作成できます。これは、ブラウザで定期的に使用されるブックマークを作成するのと似ています。唯一のバリエーションは、http/sURL ではなく JavaScript コードステートメントを記述する必要があることです。

Google Chrome でのブックマークの作成

Google Chrome は、ブックマークを管理するための最も効率的で優れた方法を提供します。いくつかの簡単な手順に従うだけで、ブックマークを追加または削除できます。

  • Chrome ブラウザを開き、ブックマークバーを右クリックします。

    chrome1

  • ドロップダウンメニューからページの追加オプションをクリックします。
  • ブックマークの編集ダイアログがあることがわかります。

    chrome2

  • ブックマークの名前を定義し、URL フィールドに JavaScript 関数を追加します
  • ブックマークバーからフォルダを選択し、保存をクリックします。
  • 保存したブックマークレットをテストするには、ブックマークバーをもう一度右クリックします。今回は、最初のステップですでに使用したページの追加オプションの代わりにブックマークマネージャーを選択します。
  • ブックマークマネージャで、保存したフォルダを見つけて開き、JavaScript で保存した URL を名前で表示できます。
  • 開くと、指定された JavaScript コードの実行を別の Web ページで自動的に確認できます。

MozillaFirefox でのブックマークの作成

ブックマークを追加、削除、または編集するために、Mozilla Firefox にはブックマークメニューも用意されています。そのメニューをナビゲートし、ブックマークを管理する必要があります。

  • Mozilla Firefox ブラウザーを開き、ブックマークバーを右クリックして、ブックマークの追加オプションを見つけます。

    firefxo 1

  • ドロップダウンメニューからブックマークの追加オプションをクリックします。
  • ブックマークの編集ダイアログがあることがわかります。

    firefox2

  • ブックマークの名前を定義し、URL フィールドに JavaScript 関数を追加します
  • ブックマークにキーワードを直接追加することもできます。次に、保存をクリックする必要があります。
  • 保存したブックマークレットをテストするには、ブックマークバーをもう一度右クリックします。今回は、ブックマークの追加オプションではなく、たブックマークレッを選択します。ブックマークマネージャのダイアログが表示されます。

    firefox3

  • すべてのブックマークセクションには、ブックマークツールバーがあります。それを開く。
  • 保存した JavaScript 関数は名前で簡単に見つけることができます。ダブルクリックして開くだけです。
  • 指定された JavaScript コードの実行を自動的に確認できます。
チュートリアルを楽しんでいますか？ <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe

関連記事 - JavaScript Function

関連記事 - JavaScript Browser