0

大変お世話になっております。

あるページのリンクをクリックすると、ログインフォームのページが開かれ、そこでユーザーID/パスワードを入力し、ログインボタンを押すと、あるページにログインすることができるという以下の流れがあります。

①②へのリンクをクリック
②ログインフォームに入力、ログインボタンをクリック
③目的のページにログイン

この、②のページでユーザーID(email)とパスワードの入力、そしてログインボタンをクリックという3つの作業を、例えばJavaScriptを利用することにより、①で②へのリンクをクリックした時点で③のページが開かれている様にしたい為、以下の様な設定に致しましたが(簡略化しております)、②のページが開かれた時点で何の動作も致しません(しかしながら、②が開かれた後、ユーザーID/パスワードを入力することなく、ログインボタンをクリックするだけでページ③にログインはされます)。

どの様に変更すれば、目的の動作をするかご教示頂けませんでしょうか。

②のindex.html

<!doctype html>
<html>
<head>
</head>
<body>

<script>
document.getElementById('button').click();
</script>

<form id="LoginForm" name="LoginForm"   method="post" class="LoginForm">

<input type="text" name="email" id="email" style="width:90%"  value="[email protected]">

<input type="password" name="pass" id="pass" style="width:90%" value="test_login">

<input type="submit" name="button" id="button" value="ログイン" class="sendButton">

</form>

</body>
</html>

1 件の回答 1

1

HTMLは上から順番に解釈され、script要素があるとその時点でそのスクリプトが実行されます。

ということは、ご質問の例では、document.getElementById('button').click();が実行された段階ではまだ<form>以降は読み込まれていないことになります。すなわち、まだログインボタンが読み込まれていないため、存在しないボタンをクリックしようとしてエラーになっていると考えられます。

目的の動作をさせるための簡単な方法は、script要素の位置を変えることで、ボタンが読み込まれたあとに実行されるようにすることです。例えば以下のように、<form>よりもあとに移動させれば動作すると思います。

<!doctype html>
<html>
<head>
</head>
<body>

<form id="LoginForm" name="LoginForm"   method="post" class="LoginForm">

<input type="text" name="email" id="email" class="  validate[required,custom[email]] text-input" style="width:90%"  value="[email protected]">

<input type="password" name="pass" id="pass" class="validate[required,minSize[6]] text-input" style="width:90%" value="test_login">

<input type="submit" name="button" id="button" value="ログイン" class="sendButton">

</form>

<script>
document.getElementById('button').click();
</script>

</body>
</html>

もしscript要素の位置を移動させるのが望ましくない場合は、DOMContentLoadedイベントを利用して、ページが読み込まれたあとに実行するように指示します。この場合はスクリプトを以下のように書くとよいでしょう。

document.addEventListener('DOMContentLoaded', function() {
    // ページが読み込まれたあとに実行される部分
    document.getElementById('button').click();
});
1
  • Faily Feely様、 ご教授頂きまして感謝いたします。 解説、ありがとうございます。 2番目の方法で目的を実現できました。本当に感謝致します。 Commented 2018年11月28日 1:52

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。