Question

我正在使用开发包的jQueryUI，但有问题。所以我正在尝试另一种方法。

点击此处的示例： http://jqueryui.com/demos/tabs/ajax.html

点击“标签2”和“标签3”。一切正常。

现在，我查看并将html源代码复制到本地文件中，并将所有相对路径替换为绝对路径：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Tabs - Content via Ajax</title>

    <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
    <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">

    <script src="http://jqueryui.com/jquery-1.5.1.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>

    <script>
    $(function() {
        $( "#tabs" ).tabs({
            ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo." );
                }
            }
        });
    });
    </script>
</head>
<body>

<div class="demo">

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>

        <li><a href="http://jqueryui.com/demos/tabs/ajax/content1.html">Tab 1</a></li>
        <li><a href="http://jqueryui.com/demos/tabs/ajax/content2.html">Tab 2</a></li>
        <li><a href="http://jqueryui.com/demos/tabs/ajax/content3-slow.php">Tab 3 (slow)</a></li>
        <li><a href="http://jqueryui.com/demos/tabs/ajax/content4-broken.php">Tab 4 (broken)</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
</div>

</div><!-- End demo -->

<div class="demo-description">
<p>Fetch external content via Ajax for the tabs by setting an href value in the tab links.  While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.</p>
<p>Tabs 3 and 4 demonstrate slow-loading and broken AJAX tabs, and how to handle serverside errors in those cases. Note: These two require a webserver to interpret PHP. They won't work from the filesystem.</p>
</div><!-- End demo-description -->

</body>
</html>

现在复制此HTML，将其粘贴到本地.html文件中，然后在浏览器中查看。

当我点击本地文件的“标签2”和“标签3”时，它会显示“无法加载此标签”错误，这意味着它无法找到那些content1.html和content2.html文件 - 但这些确实存在且有内容：

http://jqueryui.com/demos/tabs/ajax/content1.html （和content2.html）

我在这里服用疯狂的药片吗？有人可以解释一下我做错了吗？

旁注：这个问题最初是在本地弹出我的jQueryUI示例，我认为它不喜欢本地html文件的相对路径。上面的这个例子表明它是另一回事。

P.S。我在Firefox（Ubuntu，Windows）和IE（Windows）中尝试过这个测试。同样的问题。

提前感谢您的帮助。

Answer 1

这是因为这两个标签是由ajax请求加载的，而你的本地副本没有权限/授权来对jquery ui的网站执行ajax请求。

通常，由于same origin policy，您无法发送跨域ajax请求。它说 -

该策略允许在源自同一站点的页面上运行的脚本在没有特定限制的情况下访问彼此的方法和属性，但阻止访问不同站点上的页面中的大多数方法和属性。

jQueryUI ajax选项卡示例不起作用

1 个答案: