【javascript】「Onbeforeunload」イベントはページを一回クリックしないと効かない!
「Onbeforeunload」のイベントを使って、ページ遷移を検出しようとしたんですが、一部のケースで検出ができませんでした・・。
それは、ページが表示されていきなり「戻るボタン」を押してブラウザバックしたとき・・。
画面内を一回でもクリックしているときは、ちゃんとイベントが発火するのですが、いきなり「戻る」ボタンを押した場合はイベント発火しない・・。
この動作ですが、下記ページを見るとどうもブラウザの仕様みたいです。
javascript - Onbeforeunload doesn't work until mouse is clicked once in the body - Stack Overflow
ようは悪質なポップアップ広告を避けるために、こういう仕様にしているのだそうな・・。
Note: To combat unwanted pop-ups, browsers may not display prompts created in beforeunload event handlers unless the page has been interacted with, or may even not display them at all.
なんでこの動作にするとポップアップを抑制できるのかよく分かりませんが、これが仕様だということは分かりました・・。
もっと頑張ればよい検出方法があるのかもしれませんが、今回はなんだか疲れたので諦めましょうかね・・。
以上です・・。
【jQuery】Lity.jsの画像ポップアップ機能、動的に追加したコンテンツに効かないぞ!
画像をクリックしたときにポップアップで表示してくれる便利なjQueryライブラリ「Lity.js」
このライブラリですが、やはり動的に追加した「img」には反応してくれません・・。
動的に追加した「img」にもポップアップを有効にするには、追加後の要素に以下のようにイベントをセットしてあげる必要あります
(下記の「.hoge_alink」というのは「img」を囲んでいるaタグのことです・・)
jQuery(".hoge_alink").click(function() { var url = jQuery(this).attr("href"); var instance = lity(url); return false; });
異常です!
【FuelPHP】ajax送信データが$POSTの中に入ってないぞ!
最近アルバイトでFuelPHPのコードをいじっているですが、ajaxで送信したデータがサーバ側でうまく受信できない・・。
クライアント側では下記のようにajaxで送信です。
var post_data = { "hoge1_id": "hoge", "hoge2_id": "hogehoge", "hoge3_id": "hogehogehoge" }; $.ajax({ url: "/api/hogege.json", type: 'POST', cache: false, dataType: 'json', data: post_data, contentType: 'application/json' }).done(function(data) { alert('成功!'); }).fail(function() { alert('失敗・・'); });
<?php class Controller_Api extends Controller_Rest { protected $default_format = 'json'; public function post_hogege() { $hoge1 = Input::post('hoge1_id'); $hoge2 = Input::post('hoge2_id'); $hoge3 = Input::post('hoge3_id'); return $this->response("ok", 200); } }
FuelPHP側で、$_POSTの中に何も入ってなくてデータ受信できません!
原因はajaxの「contentType: 'application/json'」の記述・・。この記述がわるい!
この記述あると$POSTの中に値が入らなくてデータ取得できない!
↓
参考ブログ:
PHP で json の POST request の body を参照するには · Yuichi Takada
「contentType: 'application/json'」の記述はいらないので削除する!
これでサーバ側で「Input::post」でデータ受信できる!
あんましFuelPHPは関係ない問題かもしれないけど、めでたしめでたし、ちゃんとできた!
以上!
【Teraterm】SSHでパスワードをコピペ入力するとログイン失敗する!
ターミナルソフト「Teraterm」でSSHログインするときに、右クリックで「貼り付け」を選択すると、クリップボードにあるパスワードをコピペ入力することができます。
この「貼り付け」で入力したパスですがが、なぜかログイン失敗してしまい、うまくいかない・・。
コピペ入力したパスは「●●●●」みたいに黒塗りで表示されているんだけど、よく見るとこの文字数が一つ多いような・・?
ためしに一番最後の「●」を削除してみると、無事にログイン成功しました・・。
末尾に余分な文字列が一つ付記されていたということなんでしょうか・・。なぜ「Teraterm」でだけこの現象が起きるのか不明ですが、まあこれからはログイン失敗したら、一番お尻の文字を1文字削ることにします・・。
以上・・。
【CSS】GoogleMap APIを使ったマップのウィンドウ内がスクロールしない!
GoogleMap APIによって動的に追加したマップで、地点をクリックすると「info_window」というポップアップ・ウィンドウを表示をさせることができます。
このウィンドウ内のコンテンツが、iPhoneのサファリでうまくスクロールできない!
画面からはみ出た部分がちょん切れてしまい、見れなくて困ってしまいますた・・。
スクロールを効かせるためには、以下のようなcssを追加すると良いです。
ウィンドウの装飾用のクラス「gm-style-iw」に、スクロールを有効化するための設定をします。
.gm-style-iw { overflow: scroll; -webkit-overflow-scrolling: touch; }
以上!
【jQuery】IEでテーブル要素を追加したら親子関係がめちゃくちゃに!
最近「グーグルマップAPI」を使って遊んでいるんですが、変な問題に悩まされてしまいました・・。
グーグルマップをクリックしたときにポップアップ表示される「info_window」というのがあるですが、ここにjQueryで定義した要素をたくさん追加すると、親子関係が何かおかしくなってしまう・・。
具体的にいうと、「テーブル要素」の後に追加した要素が、全てテーブル中に取り込まれて、子要素になってしまう・・。
これはIEだけで起きる現象で、他のブラウザでは起きません・・。
これは恒例のIEクソバグだと思うので、もう理屈を考えても仕方ありません・・。
下記のように、IEの場合だけ、テーブル要素の後ろに追加するべき要素を、遅れたタイミングで追加(append)するようにしました・・。
(こうすればテーブル要素内に取り込まれず、兄弟関係として追加できるみたい)
//Googleマップのウィンドウを定義 var info_window = new google.maps.InfoWindow({ //パラメータ content: jQuery(hogege_map_content).prop('outerHTML') }); //ブラウザがIEかどうかチェック var is_IE = false; var userAgent = window.navigator.userAgent.toLowerCase(); if(userAgent.indexOf('msie') >= 0 || userAgent.indexOf('trident') >= 0) { var is_IE = true; } //IEの場合は後から要素を追加 if (is_IE == true){ google.maps.event.addListener(info_window, 'domready', function(){ jQuery(hogege_map_content).append(ie_kuso1); jQuery(hogege_map_content).append(ie_kuso2); jQuery(hogege_map_content).append(ie_kuso3); }); }
クソコードとなりますが、異常です・・。
【HTML】ボタンを押すと勝手にsubmitになって遷移しちゃう!
buttonをクリックすると勝手に画面が遷移してしまう…。
これは、buttonのタイプが「submit」の動作になっていたからでした…。
「submit」したくなかったら、下記のようにちゃんと「type="button"」という属性を付けましょう…。
<button class="button" type="button">サブミットするなyo!</button>
以上です…。