iOSのwebViewでタグに直書きしたJSが動作しない件を検証

2020年3月31日

テクノロジー プログラミング

自分の作ったプログラムにバグが発生すると、イラっとするけど、その原因がニッチだった場合に、何かの優位感を感じてしまう、ユゲタです。 「ダイアログ」とかけまして、 「小道具を使いがちなマジシャン」と、ときます。 そのココロは・・・ ボックスが、浮き上がって、現れます。

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などのデフォルトモーダル機能を発動させないようになっている事がわかりました。 おそらくブラウザの制限を疎外する要素である、こうした機能を危惧しているのだと推測されます。 確かにこうした制限をしているブラウザは、スマホアプリでは有りえて当たり前だと考えたほうがいいので、この手の機能は内部機能化しておいたほうが良さそうですね。 今回はためしてガッテンでした。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。