Question

在我的jQuery mobile（v 1.2）网站中，我有几个单独的页面（即每个页面都有一个页眉，内容和页脚）。问题是我无法链接页面。以下行无效。 <a href="anotherpage.html">Another Page</a>显示“加载页面时出错”。

如果我将rel="external"添加到<a>元素，则可行。但是，它会通过Ajax关闭自动加载。但我想使用Ajax加载以及保持页面分离。只是想知道是否可能。

代码第1页

<!DOCTYPE html> 
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Single page template</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">  </script>
</head> 
<body> 
    <div data-role="page">
        <div data-role="header">
            <h1>Page 1</h1>
        </div>
        <div data-role="content">   
            <a href="b.html"> click me</a>
        </div>  
        <div data-role="footer">
            <h4>Footer content</h4>
        </div>
        </div>
</body>
</html>

代码第2页

 <!DOCTYPE html> 
 <html>
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Single page template</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">      </script>
 </head> 
 <body> 
     <div data-role="page">
         <div data-role="header">
             <h1>Page 2</h1>
         </div>
         <div data-role="content">  
              page 2 content
         </div> 
         <div data-role="footer">
             <h4>Footer content</h4>
         </div>
    </div>
 </body>
 </html>

Answer 1

问题是您正在尝试从文件系统加载页面。假设存在安全风险，Chrome设置可以防止这种情况发生。

使用网络服务器为您的网页提供服务。您可以在Windows XP专业版上使用IIS。

或

您可以使用--allow-file-access-from-file命令行选项

启动chrome

Answer 2

我相信你应该给每个'data-role =“page”并且id如“page2所以实际上它会是：

<div data-role="page" id="page"> <!--Home Page-->
<div data-role="page" id="page2"> <!--2nd Page-->
<div data-role="page" id="page3"> <!--3rd Page-->

我不确定在这种情况下这是不是你正在寻找的......

jQuery移动页面链接无法正常工作

2 个答案: