2011-10-19 75 views
4

這是我第一個使用jquery mobile的網站,並且我遇到了外部鏈接問題。與jQuery Mobile的外部鏈接和硬件後退按鈕

我會告訴你一個例子。

這是第一個

<!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(到目前爲止,一切都很好)

<!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時,我按下硬件bac在Android移動設備k按鈕以及回到帕格A.

然後我再次按下在頁面A的鏈路的網頁B出現,但它也加載網頁A與tipical裝載DIV表示..

問題是?爲什麼這碰巧?第二個是如何做到這一點?

從來就找到了一種方法,在網頁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?