ホーム>Web デザインのチュートリアル>HTMLチュートリアル

HTML5ページの実装メソッドを返す

著者：Eve Cole 更新時間：2025-01-25 18:36:02

このタイトルを見ると、何だこれはと思うかもしれません。 実際に私が言いたいのはこれです。以下の録画をご覧ください。

この種のインタラクションは、H5 ページでは一般的です。都市をクリックし、都市選択のフローティング レイヤーをポップアップし、戻るボタンを押してフローティング レイヤーを閉じます。

これらの操作は、左上隅/右上隅の閉じるボタンをクリックしなくても実行できます。Fliggy の H5 では、進むときにポップアップ レイヤーが表示されますが、戻るときにポップアップ レイヤーが閉じます。これは他社では機能しません。 Qunar.com H5 航空券、Meituan H5 ホテル）。

なぜこのように設計されているのでしょうか?

H5は携帯電話上で操作するため、携帯電話の指で操作できる範囲は非常に狭く、ましてや左上隅/右上隅のデッドスペース（キャンセル/閉じる）領域は非常に狭いです。タップすると戻るというアクションを聞いたことがあるでしょう。これは、ユーザーにとって非常に便利でフレンドリーな操作です。都市を選択した後、「戻る」をクリックするだけでポップアップ レイヤーを閉じることができます。

達成方法

非常に高い需要があるため、開発者としては、この機能の実装に全力を尽くすことは間違いありません。 Google で検索する必要さえありません。history.back()、history.go() などのメソッドを思いつくはずです。 ただし、理論的には、URL が変更されているため、ブラウザ/Web ビューの戻り/転送にはページの再読み込みが必要になります。 シングル ページ アプリケーション (SPA) についてよく知っている場合、または React/Vue を使用している場合は、ルーティングと呼ばれるものがあることを知っているはずです。 このようなハッシュが変更され更新できない URL 変更は、HTML5 で追加された履歴機能です。

履歴インターフェイス

インターフェイス履歴 { 読み取り専用属性 unsigned 長い長さ; 属性 ScrollRestoration 読み取り専用属性 任意の状態; void go(任意のデータ、DOMString タイトル、任意の DOMString?) url = null); void replaceState(任意のデータ、DOMString タイトル、オプションの DOMString? url = null);};
  1. プッシュ状態
  2. 状態を置き換える

別のイベントがあります

  1. ポップステート

PushState、replaceStateは履歴スタックの順序を変更するために使用され、onpopstateは戻ったり先に進むときにトリガーされます。

vue-router の実装 (1694 行目) にも同じことが当てはまります。

具体的な実装

ここまで述べたので、この関数を実装する方法を見てみましょう。

PushStateとreplaceStateの互換性を見てみましょう

すべてグリーンなので、より安心して使用できます。

アイデア：

  1. PushStateは、ポップアップレイヤーをクリックするとハッシュを追加します
  2. タップして戻るときに onpopstate イベントがトリガーされると、ポップアップ レイヤーが非表示になり、ハッシュが変更されます。
 <button onclick=city()> 都市</button><br> <button onclick=calendar()> カレンダー</button><br> <button onclick=description()> 説明</button> <div id=city class=com style=display: none;> シミュレーション都市ポップアップ レイヤー</div> <div id=calendar class=com style=display: none;> シミュレーション カレンダー ポップアップ レイヤー</div> <div id=description class=com style=display: none;> 説明ポップアップ レイヤーをシミュレートする</div>
ボタン { 境界線: #0000; 背景色: #f90; 位置: 絶対値 ; 左: 0; 背景色: #888589;
 var cityNode = document.getElementById('city'); var CalendarNode = document.getElementById('description'); var descriptionNode = document.getElementById('description'); ; window.history.pushState({'id':'city'},'','#city') } 関数カレンダー() { CalendarNode.style.display = 'block'; window.history.pushState({'id':'calendar'},'','#calendar') } 関数 description() { descriptionNode.style.display = 'block'; window.history.pushState({'id':'description'},'','#description') } window.addEventListener('popstate', function(e){ //alert('state:' + e.state + ',historyLength:' +history.length); if (e.state && e.state.id === 'city') {history.replaceState('','','#'); cityNode.style.display = 'block'; } else if (e.state && e.state.id === 'calendar') {history.replaceState('','','#');表示 = 'ブロック'; } else if (e.state && e.state.id === 'description') {history.replaceState('','','#'); descriptionNode.style.display = 'block' } else { cityNode .style.display = 'none'; カレンダーNode.style.display = 'none';

主に JS コードを見て、ページの前方および後方イベントを監視して履歴を制御します。

ソースコードはこちら

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。

関連記事