Question

我想弄清楚如何使用$.mobile.loadPage。我在加载外部页面时遇到问题。这是我的代码片段：

<!DOCTYPE HTML>
<html>
   <head>
      <title>test</title>
      <meta name="viewport" content="width=device-width; initial-scale=1">
      <meta http-equiv="cache-control" content="no-cache">
      <meta http-equiv="pragma" content="no-cache">

      <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>
      <script>
         function loadme () {
            $.mobile.loadPage( "external.html", {pageContainer: $('#homecontent')} );            
         }          
         ///////////////////////////////////////////////////////////////////
         $(document).bind ("pagebeforeload", function (event, data) {
            alert ("ext - pagebeforeload");
         });
         $(document).bind ("pageload", function (event, data) {
            alert ("ext - pageload");
         });
         $(document).bind ("pageloadfailed", "#page2", function (event, data) {
            alert ("pageloadfailed");
         });
      </script>
   </head>
   <body>

      <div data-role="page" id="home">
         <div data-role="header" data-id="myheader" data-position="fixed">
            <h1>Home Page</h1>
         </div>
         <div data-role="homecontent">
            <span onclick="loadme();" style="cursor:pointer;">load me</span>
         </div>
         <div data-role="footer" data-id="myfooter" data-position="fixed">
            <h1>footer</h1>
         </div>
      </div>

      <div data-role="page" id="page2" data-add-back-btn="true">
         <div data-role="header" data-id="myheader" data-position="fixed">
            <h1>Page 2</h1>
         </div>
         <div data-role="page2content">
         </div>
         <div data-role="footer" data-id="myfooter" data-position="fixed">
            <h1>footer</h1>
         </div>      
      </div>
   </body>
</html>

以下是我收到的错误

XMLHttpRequest无法加载文件：/// C：/Documents%20and%20Settings/.../external.html。原点为null Access-Control-Allow-Origin不允许使用。

我在本地桌面上测试。欢迎任何建议。提前致谢

Answer 1

您的浏览器有一些限制，阻止某些类型的交互将本地文件。假设您使用的是Chrome，则需要添加命令行选项以启用此类访问。在Windows中它将是：

chrome.exe --allow-file-access-from-files

jquery mobile loadPage

1 个答案: