GreaseMonkeyに関する質問です。


mixi版ブラウザ三国志を遊んでいます。
出兵画面の「次へ」ボタンが武将一覧の下にあり、スクロールするのが面倒です。

そこで、GreaseMonkeyで以下のようなスクリプトを記述してみました。

// ==UserScript==
// 省略
// @include http://*.3gokushi.jp/facility/castle_send*
// ==/UserScript==

(function(){
 if(location.pathname.indexOf("facility/castle_send_troop.php") >= 0){
  AddShutsugekiLink();
 } else {
  //GM_log(document.getElementsByTagName('html')[0].innerHTML, 0);
 }
})();

function AddShutsugekiLink() {
 var elem = document.getElementById("statMenu");
 var lnk = document.createElement("a");
 lnk.title = "shutsugeki";
 lnk.href = "javascript:void(0);";
 lnk.style.margin = "3px";
 lnk.innerHTML = "shutsugeki";
 lnk.addEventListener("click", function() {document.getElementsByName('input_troop').item(0).submit();}, true);
 var lstItm = document.createElement("li");
 lstItm.setAttribute("class", "last");
 lstItm.appendChild(lnk);
 elem.appendChild(lstItm);
}

ボタンのsubmit()を呼んでいるだけですが、どうにもうまく動かず、同じ画面に戻ってきてしまいます。
どのように修正するとうまく動くのか、アドバイスをお願いします。

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2010/06/03 13:57:35
  • 終了:2010/06/09 10:41:56

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932010/06/04 08:09:25

ポイント100pt

試行錯誤してみたところ正常な動作をする条件は、form[name="input_troop"]の中のinput[name="btn_preview"]からのsubmitのようです。

(function(){
 if(location.pathname.indexOf("facility/castle_send_troop.php") >= 0){
    var menu = document.getElementById("statMenu");
    var p = document.querySelector('[name="btn_preview"]');

    var btn = p.cloneNode(true);
    btn.value = "出撃";
    btn.style.position = "absolute";
    btn.style.top = (menu.offsetTop-5) + "px";
    btn.style.left = (menu.offsetWidth-50) + "px";
    p.form.appendChild(btn)
  }
})();

一応説明しておくと、

  • createElement~でinputを作ってもいいけどcloneNodeで効率化。
  • クローンをappendする場所はform内。

(formをよくわかっていない。サーバ側でname属性チェックは常識なのかも)

id:drill256

ありがとうございます。

ボタンでサブミットなんですね。

サブミットは必ずフォームからという思い込みがありました。

まだまだJavaScriptは不勉強です。

見た目をボタンにしていただき、ありがとうございます。

ボタンだと、かっこいいですね。

querySelectorとか、cloneNodeとか、メソッドの勉強にもなりました。

早速試してみたいと思います。

2010/06/04 10:00:18
  • id:Cherenkov
    var a = document.createElement('a');
    a.textContent = "出撃";
    a.addEventListener("click",function(){
    document.querySelector('[name="btn_preview"]').click();
    //document.querySelector('[name="input_troop"]').submit();//これはダメ
    },false)
    document.getElementById("statMenu").appendChild(a)

    これでいけました。なんでform直のsubmitはダメなんだろう。
  • id:Cherenkov
    ざっくりまとめました。
    http://cherenkov.hp.infoseek.co.jp/tmp/sample/form_submit_name-value_sample.shtml
  • id:drill256
    ボタンへのclick()でいけるんですね。
    こちらでもうまく動きました。
    解説ページまで作っていただき、いろいろありがとうございます。

    GreaseMonkeyでは、この対処で十分ですね。
    しかし、click()とsubmit()で結果が違うというのは、
    どういうことでしょうね?
    ボタンを押しても関数が呼び出されているわけでもなく、
    サブミットしているだけのように思われますが。
    元のページに戻るということは、クッキーは送信されていると
    思うし、理由がよくわかりません。

    とりあえず、やりたいことが出来てすっきりしました。
    ありがとうございました。
  • id:Cherenkov
    click()とsubmit()は、"submitボタン自体のname"を送るか送らないかの違いがあります。
    おそらく三国志側でsubmitのnameであるbtn_previewが送られてくるのを期待していて、
    btn_previewが無かったらボタンが押されていないと判定し、リロードするといった処理がされていると思われます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません