Question

我制作了如下的test.html文件：

<body>
<div data-role="page">
    <!--Head of the main web-->
    <div data-role="header" data-position="fixed">
        <h2><img src="pic/jquery-logo.png" alt="1"></h2>
    </div>


    <div role="main" class="ui-content">

        <div data-role="tabs" id="tabs">
            <!--3 row navbar--!>
            <div data-role="navbar">
                <ul>
                <li><a href="#one" data-ajax="false">first</a></li>
                <li><a href="#two" data-ajax="false">second</a></li>
                <li><a href="#three" data-ajax="false">third</a></li>
                </ul>
            </div>

            <!--first nav bar of the 3-->
            <div id="one" class="ui-body-d ui-content">
                <ul data-role="listview" data-inset="true">
                    <li><a href="order.html"><img src="pic/business_standard_room.png"></a></li>        
                </ul>
            </div>

            <div id="two">
                <ul data-role="listview" data-inset="true" class="ui-alt-icon">
                </ul>
            </div>

            <div id="three">
                <ul data-role="listview" data-inset="true" data-divider-theme="a">  
                </ul>
            </div>
    </div>

    <!--footer of the page-->
    <div data-role="footer" data-position="fixed">
        <h5>Powered by Atek</h5>
    </div>

</div>

我把order.html和test.html放在同一个文件夹中。但是当我点击第一个标签中的链接时，我返回错误。这是Chrome开发者控制台显示的错误

XMLHttpRequest无法加载文件：///media/IRM_CCSA_X6/Mobile%20Website/Hotel/order.html。收到无效回复。因此不允许原点'null'访问。

Answer 1

jQuery Mobile使用AJAX进行网站内部导航，因此当您按下链接时，将完成AJAX调用以获取新页面。

我认为您没有使用服务器来测试您的网站（只是file:///协议），我认为这就是问题所在。据报道a bug使用Chrome上的AJAX无法正确加载本地文件，因此您应该使用其他浏览器或部署服务器在Chrome上对其进行测试。

或者，如果您不想使用AJAX导航，可以将属性data-ajax添加到链接以禁用它：

<a href="order.html" data-ajax="false">

希望这有帮助！

jquery mobile加载新页面返回错误

1 个答案: