IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / javascript / はてなブログ:トップページに「前に戻る」を実装する(やや失敗)

はてなブログ:トップページに「前に戻る」を実装する(やや失敗)

2021/01/30 javascript, はてなブログ

そろそろこのサイトのデザインを変えようかと思い始めての tips チップス(6)。

ブログのトップページは一般的に新着記事を何件か表示するようになっています。はてなブログも、表示形式は一覧と全文形式がありますがどちらも最大15件まで表示できます。

で、その表示件数以降を見るために「次のページ」というリンクがあるわけですが、「前のページ」に戻るためのリンクがありません。この「前のページ」のリンクを作ろうという話です。

  • 過去の試み
    • Web Storage API
    • History.back()
  • URLクエリ
  • Javascript

過去の試み

この問題、実は過去に2度試みて、実装可能になっています。

Web Storage API

ひとつは、Web Storage API というクッキーと同じような仕様を使ってブラウザのローカルに前のページの履歴を残す方法

www.imuza.com

History.back()

そしてもうひとつは、単純に History.back() という Javascript のメソッドを使う方法です。

www.imuza.com

URLクエリ

で、今回思いついたのは URLクエリに現在表示しているページの URLクエリを次のページのリンクに付加する方法です。

しかし、この方法には決定的な問題があります(笑)。

ひとつ前のページにしか戻れないことです。この方法は、次のページに現在ページの前のページのリンク先を送りますので次のページから現在のページに戻ることはできてもその時にはもう前のページのリンク先がどこにもなくなっています。

ちょっと冷静に考えれば当たり前のことですが気づきませんでした(涙)。

Javascript

で、そこそこ苦労してコードを書いてしまいました(涙)。

記録のために残しておこうと思います。

(function(){
    if(document.body.classList.contains('page-index')){   // トップページ
        const parameter = [];
        const query = location.search.substring(1).split('&');
        for(let i=0; query[i]; i++) {
            const array = query[i].split('=');
            parameter[array[0]] = array[1];
        }


        if(parameter.page !== undefined){
            const next = document.getElementsByClassName('pager-next')[0];
            if(next !== undefined){
                const nextA = next.children[0];
                nextA.href = nextA.href + '&prev=' + parameter.page;
            }


            const elmSpan = document.createElement('span');
            elmSpan.classList.add('pager-prev');
            const elmA = document.createElement('a');
            elmA.textContent = '前のページ';


            if(parameter.prev !== undefined){
                elmA.href = location.origin + '?page=' + parameter.prev;
            }else{
                elmA.href = location.origin;
            }
            elmSpan.appendChild(elmA);


            let pager = document.getElementsByClassName('pager')[0];
            if(pager === undefined){
                pager = document.createElement('div');
                pager.classList.add('pager', 'autopagerize_insert_before');
                pager.appendChild(elmSpan);
            }else{
                pager.insertBefore(elmSpan, pager.firstChild);
            }
            document.getElementById('main-inner').appendChild(pager);
        }
    }
})();

【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

  • 作者:Mana
  • 発売日: 2019/03/16
  • メディア: 単行本
はてなブログ用ボトムナビゲーション Bottom Navigation V2
Adsenseは画像内のテキストも調べている
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/03/21

WordPress:メール送信にGmailのSMTPを使う(プラグインなし)

2023/03/10

WordPress:サムネイル付き次の記事/前の記事

2023/02/28

Twitterシェアリンクはintent/tweetを使おう

2023/02/21

GoogleタグマネージャーとアナリティクスGA4

2023/02/8

WordPress:人気記事を直近の期間指定で表示する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips109
  • javascript98
  • Joomla!88
  • Windows68
  • Wordpress65
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • ConoHa WING6
  • Git入門6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Blankslate3
  • Docker3
  • Twitter2
  • GitHub2
  • Mactype2
  • はてなブクマ1
  • 映画1
  • youtube1
  • rails入門1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com