jQuery/JavaScript不支持在支持jQuery Mobile的網頁上的子頁面上工作

我在我的jQuery Mobile網站頭部有一個圖像，我自動調整大小以便填滿屏幕。在我的頁面上有一個用戶登錄的子頁面。但是在這個頁面上，圖片的大小調整不起作用。jQuery/JavaScript不支持在支持jQuery Mobile的網頁上的子頁面上工作

因爲我正在搜索解決方案，我已經發現它是由jQuery Mobile引起的，它只允許jQuery在第一個data-role =「page」div內工作。但是，當我嘗試每種解決方案時，他們都不會工作。

你們能幫我找到解決辦法嗎？

我的代碼（在很短的複製/粘貼示例）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>WHY DON'T YOU WORK?</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
     <script> 
      window.onresize = function (event) { 
       resizeimage(); 
      } 
      window.onload = function (event) { 
       resizeimage(); 
      }    
      function resizeimage() { 
       var img = document.getElementById('headerimage'); 

       var oldwidth = img.naturalWidth; 
       var oldheight = img.naturalHeight; 

       var newwidth = $(window).width(); 
       var newheight = oldheight/oldwidth * newwidth; 

       img.width = newwidth; 
       img.height = newheight;  
      } 
     </script> 
    </head> 

    <body> 
     <div class="PageDiv" data-role="page" data-add-back-btn="true" id="FrontPage"> 

      <div class="HeaderDiv" data-role="header" data-position="fixed"> 
       <img id="headerimage" name="headerimage" src="images/PSO_Banner_960x89.png" /> 
      </div> 

      <div class="ContentDiv" data-role="content" data-theme="a"> 
       CONTENT #1 
       <a href="#LoginPage">LoginPage</a> 
      </div> 

      <div class="FooterDiv" data-role="footer" data-position="fixed"> 
       FOOTER 
      </div> 
     </div> 

     <div class="PageDiv" data-role="page" data-add-back-btn="true" id="LoginPage"> 

      <div class="HeaderDiv" data-role="header" data-position="fixed"> 
       <img id="headerimage" name="headerimage" src="images/PSO_Banner_960x89.png" /> 
      </div> 

      <div class="ContentDiv" data-role="content" data-theme="a"> 
       CONTENT #2 
       <a href="#FrontPage">FrontPage</a> 
      </div> 

      <div class="FooterDiv" data-role="footer" data-position="fixed"> 
       FOOTER 
      </div> 
     </div> 
    </body> 
</html>

仍在尋找解決方案...

來源

2013-05-28 ikwillem

代碼建議：'$（窗口）。對（'LOA d resize'，resizeimage）' – Johan

一是不要混用香草的JavaScript和jQuery。

你的問題是，你有2頁與2相同的標題圖片。它們中的Bot被加載到DOM中，並且您的功能始終訪問第一個頁面中的第一個圖片。

您將需要一點點jQuery和jQuery Mobile來完成這項工作。

取而代之的是：

var img = document.getElementById('headerimage');

使用本：

var img = $.mobile.activePage.find('#headerimage');

編輯：

工作例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>WHY DON'T YOU WORK?</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
     <script> 
      window.onresize = function (event) { 
       resizeimage(); 
      } 

      window.onload = function (event) { 
       resizeimage(); 
      }  

      $(document).on('pageshow', '[data-role="page"]', function(){ 
       resizeimage();  
      }); 

      function resizeimage() { 
       var img = $.mobile.activePage.find('#headerimage');//document.getElementById('headerimage'); 

       var oldwidth = img.naturalWidth; 
       var oldheight = img.naturalHeight; 

       var newwidth = $(window).width(); 
       var newheight = oldheight/oldwidth * newwidth; 

       img.width(newwidth); 
       img.height(newheight); 

       $(window).trigger("throttledresize");    
      } 
     </script> 
    </head> 

    <body> 
     <div class="PageDiv" data-role="page" data-add-back-btn="true" id="FrontPage"> 

      <div class="HeaderDiv" data-role="header" data-position="fixed"> 
       <img id="headerimage" name="headerimage" src="http://www.azhumane.org/wp-content/uploads/2012/06/AHS025_mastSM_21-11.png" /> 
      </div> 

      <div class="ContentDiv" data-role="content" data-theme="a"> 
       CONTENT #1 
       <a href="#LoginPage">LoginPage</a> 
      </div> 

      <div class="FooterDiv" data-role="footer" data-position="fixed"> 
       <h3>FOOTER</h3> 
      </div> 
     </div> 

     <div class="PageDiv" data-role="page" data-add-back-btn="true" id="LoginPage"> 

      <div class="HeaderDiv" data-role="header" data-position="fixed"> 
       <img id="headerimage" name="headerimage" src="http://www.azhumane.org/wp-content/uploads/2012/06/AHS025_mastSM_21-11.png" /> 
      </div> 

      <div class="ContentDiv" data-role="content" data-theme="a"> 
       CONTENT #2 
       <a href="#FrontPage">FrontPage</a> 
      </div> 

      <div class="FooterDiv" data-role="footer" data-position="fixed"> 
       <h3>FOOTER</h3> 
      </div> 
     </div> 
    </body> 
</html>

來源

2013-05-28 15:31:43 Gajotres

我不同意第一個聲明，但第二個聲明已經死了。用一個例子說明如何解決這個問題，並改用類和pageInit事件會更好。 –

好的第一個原因是美觀和主觀。他的解決方案是在jQuery Mobile $ .mobile.activePage選擇器中。 – Gajotres

只有一個其他問題，resizeImage方法也需要在pageInit上調用，因爲pageInit不會觸發窗口加載或調整大小事件。 –

jQuery/JavaScript不支持在支持jQuery Mobile的網頁上的子頁面上工作

回答

相關問題