2011-10-19 11 views
4

これはjquery mobileを使用した私の最初のWebサイトで、外部リンクに問題があります。jQuery Mobileを使用した外部リンクとハードウェア戻るボタン

私は一例を示します。

これは、ページA

<!DOCTYPE html > 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>PageA</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1" />  
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 

    <link href="Style/Style.css" rel="stylesheet" type="text/css" /> 
    <link href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" /> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script> 

</head> 
<body> 
<!-- Start of first page --> 
<div data-role="page" id="pageA" data-title="Page A" data-theme="b" data-dom-cache="false"> 
    <div data-role="header" data-theme="b"> 
     <h1>Page A</h1>   
    </div> 
    <!-- /header --> 
    <div data-role="content"> 

     <ul data-role="listview" data-theme="g"> 
      <li><a href="PageB.htm" rel="external">PageB</a></li>     
     </ul>     

    </div> 

</div> 

私はリンクをクリックすると、私はページBに行きます(これまでのところ、すべてがOKです)

<!DOCTYPE html > 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Pag B</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1" />  
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 

    <link href="Style/Style.css" rel="stylesheet" type="text/css" /> 
    <link href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" /> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script> 
</head> 
<body> 
    <!-- Start of first page --> 
    <div data-role="page" id="pageB" data-title="Page B" data-theme="b" data-dom-cache="false"> 
     <div data-role="header" data-theme="b"> 
      <h1>Page B</h1>   
     </div> 
     <!-- /header --> 
     <div data-role="content"> 

      <p>I am Page B!!!</p>    

     </div> 
     <!-- /content --> 
     <div data-role="footer" data-theme="c"> 
      <h4>Test</h4> 
     </div> 
     <!-- /footer --> 
</div> 

です

私がページBにいるとき、私はハード・バックを押しますk個のAndroidモバイルデバイスでのボタンと私はページBが表示されますが、それはまた、tipicalロードのdiv上映でページAをロードし、再びページAのリンクを押す

その後パグAに戻って...

質問は?なぜこれは起こるのですか?これを行うための方法は何ですか?

I'veは、ページBでpagebeforehideイベントに解決する方法を見つけましたが、私は、これはそれを行うための方法はないと思う...

ありがとうございます!

+0

私はこのような何かにぶつかるが、フォームを行うには持ってきました、ここで、戻る矢印は、以前の送信からフォームを保持しています。良くない。これに対する解決策はありませんか? – iJames

答えて

3

私は同様の問題を抱えていました。私はそれをハードウェアの戻るボタンの使用に関連する問題に絞り込んだ。このボタンを使用すると、モバイルブラウザはdocument.readyまたはpageinitイベントを起動しませんでした。さらに、これらの出来事は、戻るボタンを押した後、ページBからAに再び行くときに複数回発砲していました。

body要素内でonunloadにバインドすることで問題が解決されました。上記の例では、ページAのbodyタグでそれを含めて問題を解決:

Pumbaa80とNickolay Is there a cross-browser onload event when clicking the back button?のおかげ