自分の作ったプログラムにバグが発生すると、イラっとするけど、その原因がニッチだった場合に、何かの優位感を感じてしまう、ユゲタです。
「ダイアログ」とかけまして、
「小道具を使いがちなマジシャン」と、ときます。
そのココロは・・・
ボックスが、浮き上がって、現れます。
webViewだけJavaScriptが動かない事象について
友達がシステム構築をしたので見てもらいたいと、Facebook Messengerから連絡が来たので、URLをポチっとクリックして見てみたところ、データ登録のボタンがうんともすんとも押してもデータが登録できない。
どうやらbuttonタグにonclick属性を記述して、confirm処理をしているのだという事ですが、ソースコードを見ても問題はなさそうだ。
しかしこんな凡ミスを開発時に見過ごすはずがないので、試しに同じURLをパソコンのGoogleChromeブラウザに入力してみると、正常に動作します・・・
あれ？
もしかしたら、iOSのsafariブラウザが原因なのかな？と思って、MACノートにインストールされているsafariブラウザでURLを入力してみたところ、正常に動作・・・
う〜〜〜〜む・・・
なんとなく気持ち悪さMAXになってきたので、iPhoneの標準ブラウザにURLを入力して見たところ、正常に動作・・・
なんじゃこりゃ・・・
ここまで来たら、原因究明したくて仕方がなくなってきたので、次は、Gmailアプリにメールを送って、アプリ内webViewで見てみることにした・・・正常！！！
もはやFaceBookMessengerに疑いの目を向ける以外に思考が回らなくなってきました。
ちなみに、記述されているのは、下記のようなコードです。
<button type="submit" name="regist" onclick="javascript:return confirm('入力した項目を登録しますか？');">新規登録する</button>
こんなシンプルなjsが動作しないなんて、しっくりこなくて、気持ち悪すぎです。
色々と検証
とりあえず、FacebookMessengerでタグに直書きしているjavascriptが動作しないというのは、非常に困ることが今後多くなることを想定して、
その原因を探ってみたいと思います。
まずは、上記のタグ（タグにjsを直書きするパターン）の他に、scriptタグでelement操作をするやり方に変更して試してみます。
ソースコードは、以下の通りです。
<button type="submit" name="regist">新規登録する</button>
<script>
var btn = document.querySelector("button[name='regist']");
if(btn){
btn.onclick = function(){return confirm('入力した項目を登録しますか？');}
}
</script>
そして、このやり方でも、FaceBookMessengerのみNG。
そもそもこのブラウザではjavascriptが正常に動作しないのではないかと考えて、ヘッダタグ内に以下のようなコードを入れてみた。
<script>
document.body.style.setProperty("background-color","red","");
</script>
実行した結果、全てのブラウザで、画面内が真っ赤になったので、javascript自体は動作しているということが確認できました。
なんだか、confirmという命令が実行できないのではないかと思って、お手本通りにwindowから書いてみる。
<script>
var btn = document.querySelector("button[name='regist']");
if(btn){
btn.onclick = function(){return window.confirm('入力した項目を登録しますか？');}
}
</script>
これでも、ダメ・・・
類似属性のalertを試してみる。
<script>
var btn = document.querySelector("button[name='regist']");
if(btn){
btn.onclick = function(){
alert('入力した項目を登録しますか？');
}
}
</script>
どうやら、alertも動作しないようです。
別路線で、以前作った自家製のmodalライブラリを使ってみます。
参考 :
[Javascript] alertやconfirmを見栄え良くデザインできる「Modal-JS」ライブラリ
# ヘッダに記載
<script src="modal_js/src/modal.js"></script>
# body末尾に記載
<script>
var btn = document.querySelector("button[name='regist']");
if(btn){
btn.onclick = function(){
new $$modal({
// 表示サイズ
size : {
width : "500px",
height: "auto"
},
// 表示位置
position : {
vertical : "top", // 縦 [top , *center(*画像などがある場合はサイズ指定してから使用すること) , bottom]
horizon : "center", // 横 [left , *center , right]
margin : ["10px","10px","10px","10px"] // [上、右、下、左]
},
// 閉じるボタン
close : {
html : "",
size : 20,
click : function(){}
},
// [上段] タイトル表示文字列
title : "データを送信",
// [中断] メッセージ表示スタイル
message : {
html : "入力した項目を登録しますか？",
height : "auto",
align : "center"
},
// [下段] ボタン
button : [
{
mode:"close",
text:"Cancel",
click : function(){}
},
{
mode:"close",
text:"OK",
click : function(){
document.forms[0].submit();
}
}
],
// クリック挙動 [ "close" , "none" ]
bgClick : "close"
});
return false;
};
}
</script>
なんと、これは正常に動作しました。
結論
今回の検証からわかったことは、FacebookMessengerの内部ブラウザでは、confirmやalertなどのデフォルトモーダル機能を発動させないようになっている事がわかりました。
おそらくブラウザの制限を疎外する要素である、こうした機能を危惧しているのだと推測されます。
確かにこうした制限をしているブラウザは、スマホアプリでは有りえて当たり前だと考えたほうがいいので、この手の機能は内部機能化しておいたほうが良さそうですね。
今回はためしてガッテンでした。
0 件のコメント:
コメントを投稿