こちらの最終的なコードで
リンクで別ページに移動し戻ってきた時に
今のままだとページのトップに戻ってしまうのですが
"read more ..."で読み込んだ状態のまま戻るにはどうすればいいでしょうか?
どこまで読み込んだのかを記憶しておいて、ページを表示したときに、最後に読み込んだところまで読み込んであげる、というような感じになると思います。
どこまで読み込んだかを、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>
手元で動作確認をしてるときの余計なコードが紛れ込んでたので、二回目の回答を修正しました。
2013/10/20 06:42:04お返事遅くなってすみません。
2013/10/21 03:27:58動作確認できました。
いつもご丁寧なご回答ありがとうございます!