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的网页上的子页面上工作

回答

相关问题