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

Posted 2023-02-27

【中文标题】获取 jQuery UI 主题列表 - 从 URL (same-origin-policy)

【英文标题】：Get List of jQuery UI themes - from an 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 什么都没有：/ ***.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这样的东西吗？我认为值得一试..但我认为会有一个适当的直接方法来解决这个问题。

【参考方案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/ 希望这会有所帮助