获取 jQuery UI 主题列表 - 从 URL (same-origin-policy)答案

【问题标题】：Get List of jQuery UI themes - from an URL (same-origin-policy)获取 jQuery UI 主题列表 - 从 URL (same-origin-policy)
【发布时间】：2012-09-18 15:41:40
【问题描述】：

有人知道从http://jquery-ui.googlecode.com/svn/tags/1.8.23/themes/ 获取 jQuery 主题列表的方法吗？

我正在创建带有主题滚轮的简单网页，用户可以在其中动态切换主题。

Working fiddle - 点击右上角的主题并选择一个新主题。

现在列表被硬编码如下，

<div id="theme-list">    
   <ul>
      <li class="themes-el ui-state-highlight" data-theme="cupertino">cupertino</li>
      <li class="themes-el" data-theme="hot-sneaks">hot-sneaks</li>
      <li class="themes-el" data-theme="smoothness">smoothness</li>
      <li class="themes-el" data-theme="pepper-grinder">pepper-grinder</li>
      <li class="themes-el" data-theme="ui-lightness">ui-lightness</li>
      <li class="themes-el" data-theme="ui-darkness">ui-darkness</li>
      <!-- and more -->
   </ul>    
</div>

有没有办法从 URL http://jquery-ui.googlecode.com/svn/tags/1.8.23/themes/ 获取这个主题列表？（跨域：http://www.w3.org/TR/cors/#access-control-allow-origin-response-hea）

试过了，但是下面的代码失败了..

$.ajax({
    url: 'http://jquery-ui.googlecode.com/svn/tags/1.8.23/themes/',
    dataType: 'text',
    beforeSend: function ( xhr ) {
        xhr.setRequestHeader("Access-Control-Allow-Origin", 'http://jquery-ui.googlecode.com');
        xhr.setRequestHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
    },
    crossDomain: true,
    success: function (data) {
        alert(data);
    }, 
    error: function (jqXHR, textStatus, errorThrown) {
        alert(errorThrown + ' ' + textStatus + ' ' + jqXHR.responseText);
    }
});

感觉我在这里遗漏了很多东西。任何见解都会有帮助。

【问题讨论】：

我只能找到一种跨浏览器的方式来做跨域 ajax IE8+ 和其他浏览器，对于 IE6-7 什么都没有：/ stackoverflow.com/questions/3362474/… 但它是用于 JSON 嗯跨度>
@mcpDESIGNS 我会试一试的。我从来没有对跨域资源做过任何事情，而且总是在安全区的 Intranet 中。现在正在考虑我自己的网页并喜欢使用 jQuery 的想法主题.. Anways.. 我阅读了 MDN 并尝试了一些东西，但它对我没有用.. 我想我在这里遗漏了很多东西.. 所以想把它贴在这里以便有人可以真正指出我正确的方向。
最常见的解决方法是创建您自己的页面来下载它，然后 JavaScript 可以使用它。您可以创建一个页面，该页面仅在 jquery-ui.googlecode.com/svn/tags/1.8.23/themes 上调用 HTTP 请求（例如，对于 php，请参阅 php.net/manual/en/function.curl-exec.php），然后您可以处理它或仅查看它。我知道这不是您正在寻找的东西，但它总是有效:-)
@Vega 也可以看看这里enable-cors.org
@kuncajs 当你说'创建一个页面'时，你的意思是像iframe这样的东西吗？我认为值得一试..但我认为会有一个适当的直接方法来解决这个问题。

标签： javascript jquery cross-domain same-origin-policy

【解决方案1】：

似乎服务器不允许跨域请求。你无能为力。

您可以设置一个可以卷曲该页面的 PHP 脚本，然后您可以对 PHP 脚本进行 ajax 处理。就像昆卡斯所说的那样

您可以在您的服务器上使用这个简短的 PHP curl 脚本：

<?php

$ch = curl_init();
// URL to grab
curl_setopt($ch, CURLOPT_URL, 'http://jquery-ui.googlecode.com/svn/tags/1.8.23/themes/');
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$output = curl_exec($ch);
curl_close($ch);

print_r($output);

?>

那么它只是一个简单的ajax脚本：

$.ajax({
    url: "linktoscript.php",
    dataType: "html",
    success: function(data) {
        console.log(data);
    },
    error: function (request, status, error) {
        console.log(request);
        console.log(status);
        console.log(error);
    }
});

【讨论】：

这正是我的想法。呈现页面的服务器可能类似于 Web 浏览器 - 使用 curl 它发出 HTTP 请求并获取表示页面内容的字符串。我的意思是 SVN 主题页面的整个 HTML 代码。把它想象成一个代理 - 服务器为您下载并存储它，然后您可以在您自己的域上的“代理”服务器上发出 AJAX 请求，因此没有跨域策略问题 -> 问题已解决；）跨度>
我不知道php，所以我需要一些时间才能理解这段代码。
@Vega 即使我再次开始使用 CURL 时也必须查找参考资料。如果你想找到一些注释代码，那么只需搜索“php simple curl”。
@Vega 这并不难，您可以用任何您熟悉的服务器端语言编写代理。您甚至可以对其进行概括，以便您可以将要获取的 URL 作为查询参数传递，例如 proxy.php?url=http://www.google.com

【解决方案2】：

您是否尝试过使用 JQuery 使用的 theme switcher 插件：
它将提供 JQuery 用于演示目的的所有现成主题。

<script src="jquery.js"></script>
<script type="text/javascript" src="themeSwitcher.js"></script>
<script type="text/javascript">       
   $(document).ready(function(){
       $('#switcher').themeswitcher();
   });
</script>    

<div id="switcher"></div>

【讨论】：

【解决方案3】：

我从yahoo(YQL) 和this Cross-domain requests with jQuery plugin 找到了这个使用YQL 获取跨域内容的服务。

http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/

演示： http://jsfiddle.net/SXHrB/4/

下面的代码只是简单地获取了我解析以获得所需内容的整个页面。

$.ajax({
    url: 'http://jquery-ui.googlecode.com/svn/tags/1.8.23/themes/',
    type: 'GET',
    success: function(data) {
        alert(data.responseText.substring(data.responseText.indexOf('<ul>'), data.responseText.lastIndexOf('</ul>') + 4));
    }
});

【讨论】：

【解决方案4】：

您可以让您的网站像这样添加指向样式的链接：

当您单击新主题时，javascript会在头部添加一个链接标签您可以将链接的 ui-lightness 部分替换为此处的任何名称：http://jquery-ui.googlecode.com/svn/tags/1.8.23/themes/ 希望这会有所帮助

【讨论】：