http://q.hatena.ne.jp/1382074494

こちらの最終的なコードで
リンクで別ページに移動し戻ってきた時に
今のままだとページのトップに戻ってしまうのですが
"read more ..."で読み込んだ状態のまま戻るにはどうすればいいでしょうか?

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/10/21 03:28:16
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.1

回答回数4972ベストアンサー獲得回数2154

ポイント1000pt

どこまで読み込んだのかを記憶しておいて、ページを表示したときに、最後に読み込んだところまで読み込んであげる、というような感じになると思います。

どこまで読み込んだかを、Cookie に保存するようにしてみました。

<script type="text/javascript">
// 読み込んでいるページ
loading_page = 1;

// 最後に表示したページ
last_page = load_last_page();

/*
    指定されたページの投稿を取得する
 */
function json_call(page) {
    var URL = "http://test.com/api/get_recent_posts/?callback=show_posts_widget&read_more=More&";
    var e = document.createElement("script")
    e.src = URL + "page=" + page;
    document.body.appendChild(e);
}

/*
    JSON 形式のデータから、投稿のリストを作成する。
 */
function show_posts_widget(root) {
    var tags = "<ul>";
    for (var i = 0; i < root.posts.length; i++) {
        tags += '<li><a href="' + root.posts[i].url + '">' + root.posts[i].title + '</a></li'+'>';
    }
    tags += "</ul>";

    var e = document.createElement("DIV");
    e.className = "posts";
    e.innerHTML = tags;
    document.body.appendChild(e);

    /*
        ページを最初に表示したときに、最後に表示したページまで読み込んでいない場合
    */
    if (loading_page < last_page) {
        loading_page += 1;
        json_call(loading_page);

    /*
        次の投稿を取得するリンク
    */
    } else if (root.count * root.pages < root.count_total) {
        e = document.createElement("A");
        e.href = "#";
        e.onclick = function() {
            // 次のページを読み込み
            loading_page += 1;
            last_page += 1;
            json_call(last_page);

            // ひとつ前のリンクは消しておく
            var me = this;
            me.parentNode.removeChild(me);

            return false;
        }
        e.innerHTML = "read more ...";
        document.body.appendChild(e);

        save_last_page();
    }
}

// 1ページ目を表示する
window.onload = function() {
        json_call(1);
    }

/*
    最後に読み込んだページを、Cookie に保存する
 */
function save_last_page() {
    var path = location.pathname;

    var now = new Date().getTime();
    var expire = 60*60*24*1000 * 2;     // ★Cookie の有効期限。とりあえず2日間にしてます。
    expire = new Date(now + expire).toUTCString();

    var s;
    s = "last_page=" + last_page;
    s += "; path="+ path;
    s += "; expires=" + expire +"; ";

    document.cookie=s;
}

/*
    最後に読み込んだページを、Cookie から読み込む
 */
function load_last_page() {
    if (document.cookie.length > 0) {
        var result = /last_page=(\d+)/.exec(document.cookie);
        if (result) {
            return parseInt(result[1]);
        }
    }
    return 1;
}
</script>

<style>
DIV.posts {
    border: 1px solid green;
}
</style>


<body>
</body>

読み込んだページを保存する Cookie の有効期限は、とりあえず2日間で書いてますが、利用する場面に応じて変えてください(短くするも善し、長くするも善し)。

JSON の結果で、読み込んだページ番号が pages に反映されていると、もうちょっとだけきれいに書けそうな気もするのですが。







追記です。

戻ってきた時に、スクロール位置も記憶することはできますでしょうか?
最後に読み込んだところをトップにしたいです。

最後に表示したリストが、スクロール位置に入るようにしてみました。
リストをくくっている <DIV> に id 属性をつけて、それがスクロール位置に入ります。
初期表示だけではなく、"read more ..." をクリックしたときにも、同じ動作をします。

<script type="text/javascript">
// 読み込んでいるページ
loading_page = 1;

// 最後に表示したページ
last_page = load_last_page();

/*
    指定されたページの投稿を取得する
 */
function json_call(page) {
    var URL = "http://test.com/api/get_recent_posts/?callback=show_posts_widget&read_more=More&";
    var e = document.createElement("script")
    e.src = URL + "page=" + page;
    document.body.appendChild(e);
}

/*
    JSON 形式のデータから、投稿のリストを作成する。
 */
function show_posts_widget(root) {
    var tags = "<ul>";
    for (var i = 0; i < root.posts.length; i++) {
        tags += '<li><a href="' + root.posts[i].url + '">' + root.posts[i].title + '</a></li'+'>';
    }
    tags += "</ul>";

    var e = document.createElement("DIV");
    e.className = "posts";
    e.innerHTML = tags;
    e.id = "page_" + loading_page;
    document.body.appendChild(e);

    if (loading_page < last_page) {
        loading_page += 1;
        json_call(loading_page);

    /*
        次の投稿を取得するリンク
    */
    } else if (root.count * root.pages < root.count_total) {

        // 最後に表示したリストがスクロール位置に入るようにする
        e = document.getElementById("page_" + loading_page);
        e.scrollIntoView(true);

        e = document.createElement("A");
        e.href = "#";
        e.onclick = function() {
            // 次のページを読み込み
            loading_page += 1;
            last_page += 1;
            json_call(last_page);

            // ひとつ前のリンクは消しておく
            var me = this;
            me.parentNode.removeChild(me);

            return false;
        }
        e.innerHTML = "read more ...";
        document.body.appendChild(e);

        save_last_page();
    }
}

// 1ページ目を表示する
window.onload = function() {
        json_call(1);
    }

/*
    最後に読み込んだページを、Cookie に保存する
 */
function save_last_page() {
    var path = location.pathname;

    var now = new Date().getTime();
    var expire = 60*60*24*1000 * 2;
    expire = 30000;
    expire = new Date(now + expire).toUTCString();

    var s;
    s = "last_page=" + last_page;
    s += "; path="+ path;
    s += "; expires=" + expire +"; ";

    document.cookie=s;
}

/*
    最後に読み込んだページを、Cookie から読み込む
 */
function load_last_page() {
    if (document.cookie.length > 0) {
        var result = /last_page=(\d+)/.exec(document.cookie);
        if (result) {
            return parseInt(result[1]);
        }
    }
    return 1;
}
</script>

<style>
DIV.posts {
    border: 1px solid green;
}
</style>


<body>
</body>
他2件のコメントを見る
id:a-kuma3

手元で動作確認をしてるときの余計なコードが紛れ込んでたので、二回目の回答を修正しました。

2013/10/20 06:42:04
id:shuheiok

お返事遅くなってすみません。
動作確認できました。
いつもご丁寧なご回答ありがとうございます!

2013/10/21 03:27:58
  • id:Lhankor_Mhy
     hashか、できればHTML5でpopstateを使うという方法もありますね。まあ、2回以上戻ったりすることもなさそうだし、この用途なら必要ないかもしれませんけれど。
     wordpressのテスト環境を持っていないので、今ひとつサンプルコードが書けないのですが、jquery-pjaxとかを調べると参考になるかもしれません。

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

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

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

回答リクエストを送信したユーザーはいません