仕事でスマホ用サイトをイジっておりまして、非同期処理でのページングを 修正するに際して、History APIを触ってました。 スマホのブラウザ周りの差分で色々とハマったので、メモしておきます。 History APIとは とりあえず復習しましょう。 ##概要 HTML5で追加された、履歴操作のAPI。 履歴スタックに履歴を追加（push)、現在の履歴の書換（replace)、 ブラウザバック等のアクションによる履歴移動を監視する(pop)、といったことが可能になる。 history自体は以前からあって履歴の操作は画面遷移を伴っていたが、これらのAPIの追加によって、 画面遷移を行わなくともJavaScriptからの履歴操作が可能となった。 ##pushState 履歴をスタックに追加する。
url.js JavaScriptでURL書き換えを便利にするユーティリティライブラリ「url.js」 特定のパラメータを追加・更新・削除したり、URLの組み立て等、他の言語でも欲しいぐらい便利なライブラリです 追加・更新・削除も１つの関数を覚えてしまえば実現できるところが覚えやすくてよさそう 関連エントリ JavaScriptベースのOAuth認証ライブラリ「hello.js」
「ドロップダウン メニュー」や「カルーセル」など、今日でも見かけるウェブのデザイン要素や技術など、今までの仕様ではなく、こうした方がいい、というちょっと刺激的な記事を紹介します。「ウェブページの概念」は特になるほど、と思いました。 Goodbye to 8 Design Elements Whose Time has Come 元記事のタイトルでは「グッバイ！8つのデザインエレメント」となっていますが、デザイン要素だけでなく、技術やメディアや開発環境など、エクスペリエンスデザインを中心に幅広く取り扱われています。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。海外のブロガーから他ブログでの無断翻訳・転載の声を聞くのでご注意ください。 ドロップダウン メニュー カルーセル Internet Explorer 9 スキューモフィズム Fl
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback 履歴 API は、ブラウザーのセッション履歴 (WebExtensions history と混同しないように) へのアクセスをグローバルの history オブジェクトを介して提供しています。このオブジェクトは、ユーザーの履歴の中を前のページや後のページへ移動したり、履歴スタックの中を操作したりするのに便利なメソッドやプロパティが提供されています。
jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にする方法を紹介します。 １．jQuery UI Tabsについて 基本情報として、jQuery UI Tabsでタブ切り替えを行う方法については「jQuery UI Tabsを使ってタブを実装する」を参照してください。 サンプル ２．hashchangeプラグインについて jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にするには、hashchangeプラグインを利用します。 hashchangeプラグインの基本的な設定方法については「jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」（実装解説つき）」を参照してください。 ３．jQuery UI Tabsでhashchangeプラグインを利用する ２項のリンク先の説明ではjQuery
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 pjaxとは pjaxはpushStateとajaxを組み合わせた造語（pushState + ajax = pjax）となります。 pushStateはhtml5に新実装されたHistory APIのひとつで、javascriptからブラウザの履歴に直接挿し込む為に用意されているメソッドとなります。 詳しい詳細はこちらの記事を参考によろしくお願い致します。 HTML5 History APIについて 再びPjaxに関してなんですが、ajaxを用いて表示内容を書き換え、さらにpushStateを用いてそれに対応するURLへと置き換えhistoryも辿れるようにする技術のことです。 ajaxによるパフォーマンス向上が期待できる他、よく使用されている#!（hashbang）を
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 History APIとは History APIはHTML5の機能のひとつとなります。Historyとは履歴のことで、historyという名前のオブジェクトで存在します。 ブラウザの戻る進むボタンのイベントを取得してページの内容を動的に変えることができるものです。 まず、historyについてなんですが、history自体は昔からあり、いくつかメソッドを持つオブジェクトでした。よく使われているメソッドの一つにhistory.backが存在します。 history.back(); では実際に用意しましたので押してみましょう。以下のボタンを押すと一つ前に見たページと戻るかと思います。 <input type="button"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く