ブックマークレットからボタンを押すだけのjavascript #JavaScript

ボタンを押すだけのスクリプトでハマったことまとめ。

こんな方におすすめです。

・社内で標準化している専用ツールを使わないとだめ
・ツールの修正が自分の権限では行えない
・最後にボタンを押すだけのスクリプトがあればひと手間減る

などなどです。

html


<body>
  <h1>Hello</h1>
    <form>
      <input type="submit" name="button" value="on">
      <input type="button" name="button" value="off">
      <input type="button" name="button" value="ture">
    </form>
 </body>

form内にある、type="submit"に対して、ボタンを押してあげるというブックマークレットがほしい想定です。
id値振ってくれていたら楽だったんですが、自分では修正しようがないので以下スクリプトで対応しました。

javascript

javascript:(function(){ let b = document.getElementsByName("button");
b[0].click(); })();

例えば、何かしらtextAreaに文言を挿入するスクリプトは書いていて、あとはボタンを押すところまでのブックマークレットがあれば、この一文を最後に挿入してあげることで短縮できますね。３時間ハマってしまった・・・

例では単純なname要素ですが、幸いなことに自分の使うツールで振られているnameは一意な書き方をしてくれているので、”button”部分のみを変更するだけで使えそうです。

テスト用に以下コードを作成しました。

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>test</title>
      <script>
      function alert(){
        document.getElementById("p-test").textContent="データが飛んでるよ！submitだね！";
      }
      function off(){
        document.getElementById('p-test').textContent="";
      }
    </script>
  </head>
  <body>
    <h1>Hello</h1>
      <form>
        <input type="submit" name="button" value="on" onclick="alert()">
        <input type="button" name="button" value="off" onclick="off()">
        <p value="test" id="p-test">test</p>
    </form>
  </body>
</html>

value="on"が押されたとき（ブックマークレットからクリック）、pタグの文字が一瞬だけ”データが飛んでるよ！submitだね！”に切り替わると成功です。

メモ：
getElements~("XXX") →　XXX部分に該当するものをすべて取得。
取得したものは配列として格納されるので、指定するときにインデックスを間違えないように。
タグ要素 type が button であれ、submit であれ、click()でOK。