Получить список тем пользовательского интерфейса jQuery - из URL-адреса (политика того же происхождения)

Кто-нибудь знает способ получить список тем jQuery из http://jquery-ui.googlecode.com/svn/tags/1.8.23/themes/ ?

Я создаю простую веб-страницу с роликом тем, где пользователь может динамически переключать темы.

Рабочая скрипка — нажмите Темы в правом верхнем углу и выберите новую тему.

Прямо сейчас список жестко закодирован, как показано ниже,

<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);
    }
});

Такое чувство, что я многое упускаю здесь ... любое понимание действительно поможет.


javascript jquery cross-domain same-origin-policy
person Selvakumar Arumugam    schedule 26.09.2012    source источник
comment
Мне удалось найти кросс-браузерный способ сделать междоменный ajax IE8+ и другие браузеры, ничего для IE6-7:/ stackoverflow.com/questions/3362474/, но это было для JSON хм   -  person Mark Pieszak - Trilon.io    schedule 27.09.2012
comment
@mcpDESIGNS Я попробую .. Я никогда ничего не делал с междоменными ресурсами и всегда был в безопасной зоне интрасети .. теперь я думал о своей собственной веб-странице, и мне понравилась идея использования тем jQuery .. В любом случае .. я прочитал MDN и пробовал кое-что, но у меня это не сработало.. Я думаю, что многое здесь упускаю.. поэтому подумал о том, чтобы опубликовать это здесь, чтобы кто-то действительно мог указать мне правильное направление.   -  person Selvakumar Arumugam    schedule 27.09.2012
comment
Очень распространенным обходным решением является создание собственной страницы, которая загружает ее, а затем JavaScript может работать с ней. Вы можете создать страницу, которая ничего не делает, кроме как вызывает HTTP-запрос на jquery-ui.googlecode.com/svn/tags/1.8.23/themes (например, для php см. php.net/manual/en/function.curl-exec.php), а затем вы можете обработать его или просто просмотреть. Я знаю, что это не совсем то, что вы ищете, но это всегда работает :-)   -  person kuncajs    schedule 02.10.2012
comment
@Vega Посмотрите также здесь enable-cors.org   -  person Nelson    schedule 02.10.2012
comment
@kuncajs Когда вы говорите «создать страницу», вы имеете в виду что-то вроде iframe? Я думаю, стоит попробовать... но я думаю, что к этому будет правильный прямой подход.   -  person Selvakumar Arumugam    schedule 02.10.2012
comment
@Vega Смотрите мой комментарий под ответом, который делает именно то, что я имел в виду.   -  person kuncajs    schedule 02.10.2012

Ответы (4)


arrow_upward
7
arrow_downward

Кажется, сервер не разрешает междоменный запрос. Вы ничего не можете сделать.

Вы можете настроить PHP-скрипт, который может скручивать эту страницу, а затем вы можете просто использовать ajax-скрипт PHP. Как сказал кункайс

Вы можете использовать этот короткий сценарий 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);
    }
});
person MLM    schedule 02.10.2012
comment
Это именно то, что я думал. Ваш сервер, который отображает страницу, может быть чем-то вроде веб-браузера — с помощью curl он делает HTTP-запрос и получает строку, представляющую содержимое страницы. Я имею в виду весь HTML-код страницы темы SVN. Думайте об этом как о ПРОКСИ - сервер загружает его для вас и сохраняет, а затем вы можете сделать запрос AJAX на свой собственный прокси-сервер, который находится в вашем собственном домене, поэтому проблема междоменной политики не возникает - › Проблема решена;) - person kuncajs; 02.10.2012
comment
Я не знаю php, поэтому мне понадобится некоторое время, чтобы понять этот код. - person Selvakumar Arumugam; 03.10.2012
comment
@Vega Даже мне приходится искать ссылки, когда я снова начинаю работать с CURL. Если вы хотите найти код с комментариями, просто найдите php simple curl. - person MLM; 03.10.2012
comment
@Vega Это не так сложно, вы можете написать прокси на любом удобном для вас языке серверной части. Вы даже можете обобщить его, чтобы передать URL-адрес для получения в качестве параметра запроса, например proxy.php?url=http://www.google.com. - person Juan Mendes; 03.10.2012

arrow_upward
2
arrow_downward

Я нашел эту службу у yahoo(YQL) и эти междоменные запросы с плагином jQuery, который использует 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));
    }
});
person Selvakumar Arumugam    schedule 17.10.2012

arrow_upward
0
arrow_downward

Пробовали ли вы использовать подключаемый модуль переключателя тем, используемый JQuery:
Он предоставит все готовые темы используется 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>
person Prasad Jadhav    schedule 03.10.2012

arrow_upward
0
arrow_downward

вы можете добавить на свой сайт ссылку на стиль следующим образом:

когда вы нажимаете на новую тему, javascript добавляет тег ссылки в заголовок, вы можете заменить часть ui-lightness ссылки любым из имен здесь: http://jquery-ui.googlecode.com/svn/tags/1.8.23/themes/ надеюсь, что это поможет

person CoderKy    schedule 17.08.2014