1

我试图弄清楚如何使用$.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 无法加载 file:///C:/Documents%20and%20Settings/.../external.html。Access-Control-Allow-Origin 不允许 Origin null。

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

4

1 回答 1

0

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

chrome.exe --allow-file-access-from-files
于 2012-11-20T14:24:43.743 回答