2

モバイル Web サイトを持っています。ユーザーがモバイル サファリで自分のサイトのリンクをクリックしたときに、アドレス バーがポップアップしないようにしたいです。

オン: example.org/foo

リンクをクリックすると、example.org/bar に移動します

注: URL アドレスは history pushstate API を使用して更新されるため、新しいページは読み込まれず、URL のみが更新されます。

現在、ページが変わるとアドレスバーがポップアップします。モバイル Twitter アプリでは、クリックしてページを変更すると、URL も更新されますが、アドレス バーがポップアップしません。

ページの変更中にアドレスが表示されないようにする方法はありますか (ページが読み込まれた後ではありません。これは、私が見つけた他のすべてのリンクが参照しているものです)。

ありがとう。

4

4 に答える 4

6

これはあなたの問題の解決策ではありませんが、モバイル Twitter がどのようにこれを達成するかを説明できます。

モバイル Twitter はリンクをまったく使用しません。<li>代わりに、表示内容を変更する他の要素 (この場合は要素) にイベントをバインドし、HTML5 プッシュ状態を使用して URL バーを更新します。

したがって、私が見ることができる唯一の解決策は、可能であればモバイル用に別のバージョンを構築することです。

PS また、モバイル固有の Web サイトでコードをチェックする最も簡単な方法は、Safari を使用し、[開発] メニューの [ユーザー エージェント] を変更することです。

于 2012-06-21T00:15:41.447 に答える
1

このリンクは、探しているものを正確に示しています: http://jmperezperez.com/prevent-iphone-navigation-bar-ajax-link-click/。

デモ (以下のコード)の唯一の問題は、各リンクにハッシュ#が追加され、それによってナビゲーションが破壊されることです。誰かがそれを回避する方法を知っていれば、私はそれを大いに感謝します。

HTML:

<ul>
  <li>
      <a class="prevent" href="/">
           This link is ignored. However, it shows the bar
      </a>
  </li>
  <li>
      <a class="facebook" href="/blog">
           This link is ignored. It does not show the bar, 
           and modifies the hash tag.
      </a>
  </li>
</ul>

JS:

//hide bar on page load
setTimeout(function () {  window.scrollTo(0, 1);}, 500);

//attach event touchend
    document.addEventListener('touchend',
        function(e) {
        var target = e.target;
        while(target.nodeName !== 'A' && target.nodeName !== 'BODY') {
        target = target.parentNode;
    }
    if (target.nodeName === 'A' &&
        target.className === 'facebook') {
            target.href = '#!' + target.getAttribute('href');
        }
    },
        false
    );

    //attach event click
    document.addEventListener('click',
        function(e) {
        if (e.target.nodeName === 'A') {
            if (e.target.className === 'prevent') {
                e.preventDefault();
            } else if (e.target.className === 'facebook') {
                      var href = e.target.getAttribute('href');
                if (href.indexOf('#!') === 0) {
                    var newHref = href.substr(2);
                    e.target.href = newHref;
                    location.hash = newHref;
                    e.preventDefault();
                }
            }                       
        }
    },
        false
);
于 2013-01-05T06:02:14.650 に答える
0

新しいページに移動するのではなく、URL のみを更新するというコメントを見ると、この JS をリンク クリック/履歴更新ハンドラーにピギーバックすることで回避できるはずです。

window.scrollTo(0, 1);

これは、(新しいページネーション コンテンツをテーブルなどにロードするのではなく) 真新しいページを効果的に表すように URL が更新される場合に適しています。

JavaScript のアプローチはデバイスに依存せず、エンド ユーザーによるそれ以上のアクションに依存しません (メタ タグ ソリューションとは異なります) 。

于 2012-06-21T02:08:35.250 に答える
0

URL の末尾にハッシュ マーク (#) を追加してみてください。ページが読み込まれた後にアドレスバーがスライドするという逆の問題がありました。クライアントの高さを計算しようとしたときに、予想よりも低い数値が得られたときに問題が発生しました。数字はたまたまアドレスバーの高さのサイズでした。たまたま取得した URL の末尾に # が付いていることに気付くまでに数時間かかりました。ii がそれを削除すると、アドレス バーは上にスライドするのではなく、所定の位置にとどまりました。したがって、URL の末尾に # を追加して、何が起こるかを確認してください。

アドレスバーを表示したままにしたい場合。これは、ページ ナビゲーションにページ アンカーを使用しないことも意味します。代わりに、onclick イベントと scrollTo(0,height) を使用する必要があります。

于 2012-11-16T22:14:41.050 に答える