Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

PushStateとPopSatateを使った暗黒魔術

More than 5 years have passed since last update.

顧客情報とか秘匿したままページ遷移したい場合、Ajax とPushState+PopState のPjax が便利ですよね(IE? ヤツは死んだよ。)

で、まあ今作ってるサイトもそれでいけるかなーと思ったんですがなかなかくせ者でした。
上記ライブラリ自体が後付けって理由もなきにしもあらずなんですが、PHPフレームワークを使用しながらモーダルからAjax でページ更新する場合,

http://[host_name]/#

#はあってもなくてもいいんですがこの形なら正常にHTMLの上書きができるのですが

http://[host_name]/index/index/index

みたいな形だと何故かAjax処理の部分で失敗してうまく動いてくれません。
なので
PushStateのURI書き換え機能を利用して
URIを書き換えて

http://[host_name]/#

としてページのリロードをしてます。

逆にPopStateでブラウザバックする場合、

http://[host_name]/index/index/index

の形式ならうまくページ遷移してくれるんですが

http://[host_name]/#

の形式になっていると今度はこちらが上手く遷移してくれない。
はい、逆の発想ですね。

PushStateのURI書き換え機能を利用して
URIを

http://[host_name]/index/index/index

に変換してからページをリロードです。
ソースにするとつまりこういうこと

モーダルから次画面遷移

if (window.history && window.history.pushState){
    state = document.title;
    history.pushState(state, "", url);
    location.reload();
}
$("#target-element").html(data);    //target-elementには実際に書き換えたい要素(IDなど) を入力

ブラウザバックでインデックスに戻る

function loadContents(url) {
    $.get(url, { push_state: 'true' }).then(function(content) {
        if(document.URL.match(/..#/)) {
            var url = 'index/index';
            history.pushState("", "", url);
            location.reload();
        } else {
            $('html').html(content);
            location.reload();
        }
    });
}
// handlling popState event
read = false;
previous_location = location.href;
$(window).on('popstate', function(e){
    // prevent scanning below code twice or more
    if (read == false && previous_location != location.href) {
        if(location.href != location.pathname) {
            loadContents(location.pathname);
        }
            read = true;
    }

});

こんなクソコード書くのに半日かかりましたとさ。
めでたしめでたし。

nagai_akinari
その辺の独立(笑) プログラマーやってます。 お仕事ください?
http://aochd.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away