2018/03/23

Seesaa ブログでスマホでも強制的にパソコン用ページを表示させる

Seesaa のブログはスマホからアクセスすると自動的にスマートフォン専用のページに移動する仕様になっています。

しかし、私のブログ「アポロ漫録」では縦書き表示に最適化していてスマートフォン専用ページに移動するのは都合が悪いので、コンテンツをカスタマイズして JavaScript で強制的にパソコン用のページに移動するようにしてありました。

ところが、今までのスクリプトでは移動がうまくいかずに無限にリロードを繰り返してしまう不具合がありました。一度うまく移動できれば二度目からは不具合の発生頻度は減るので問題ないかと思っていたのですが、何度かテストしてみると思っていた以上に発生頻度が高いので対処が必要だと思われました。

今までのスクリプトは以下のようになっていました。

document.cookie = 'force_pc=1; max-age=157680000; path=/';
document.cookie = 'force_sp=0; max-age=157680000; path=/';
if(navigator.cookieEnabled){
    location.reload();
}

最初の 2 行でブラウザの Cookie に PC 表示のフラグをオン、スマホ表示のフラグをオフにする書き込みをしています。その後、ブラウザの Cookie が有効ならページを再読み込み、無効なら何もせずに終了していました。これだけのシンプルなスクリプトですが、理論上は問題なく動作して PC 表示が強制されるはずです。

いろいろと試行錯誤してみたのですが、どうやらページを再読み込みする際に端末に保存されているキャッシュを表示してしまうのが原因だったようです。以下のように location.reload() に true という引数を追加することでデータをサーバーから読み込むことができるようになります。

document.cookie = 'force_pc=1; max-age=157680000; path=/';
document.cookie = 'force_sp=0; max-age=157680000; path=/';
if(navigator.cookieEnabled){
    location.reload(true);
}

こうすることで安定してほぼ確実にパソコン用のページが表示されるようになりました。

0 件のコメント:

コメントを投稿