Получение элемента, отображаемого внешним javascript src после готовности документа jQuery

Question

Я пытаюсь получить некоторые HTML-элементы из кода, который отображается виджлером TripAdvisor.

<div id="TA_selfserveprop423" class="TA_selfserveprop" style="display: none;"> 
    <ul id="6rK9LP" class="TA_links 6OfnXtypSP7O"> 
     <li id="vWwqKw7sl" class="PhWrYsr"><a href="http://www.tripadvisor.com/" target="_blank"><img src="http://www.tripadvisor.com/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor" /></a></li> 
    </ul> 
</div> 
<script src="http://www.jscache.com/wejs?wtype=selfserveprop&amp;uniq=423&amp;locationId=3386635&amp;lang=en_US&amp;rating=true&amp;nreviews=5&amp;writereviewlink=true&amp;popIdx=true&amp;iswide=false&amp;border=true&amp;display_version=2"> 
</script> 

Код, который визуализируется имеет этот элемент, который является тот, который я хочу получить с JQuery:

<ul class="widSSPBullet"> 
    <li> <span class="widSSPDate">Jan 8, 2016:</span> <span class="widSSPQuote">“Great week in cabo”</span> </li> 
    <li> <span class="widSSPDate">Dec 20, 2015:</span> <span class="widSSPQuote">“Plesent stay”</span> </li> 
    <li> <span class="widSSPDate">Nov 1, 2015:</span> <span class="widSSPQuote">“Great stay”</span> </li> 
    <li> <span class="widSSPDate">Oct 26, 2015:</span> <span class="widSSPQuote">“Marina Sol is Awesome!”</span> </li> 
    <li> <span class="widSSPDate">Sep 19, 2015:</span> <span class="widSSPQuote">“Warm and welcoming and best location in...”</span> </li> 
</ul> 

Однако, похоже, что он не получает вынесено только после документа готов, и, возможно, даже после загрузки окна. Возможно, я делаю что-то неправильно, но есть способ подождать, пока элемент загрузится, а затем возьмите его с помощью jQuery. В идеале я бы хотел получить полный обзор через виджет или API от Trip Advisor, но я не думаю, что они это предоставили. Я посмотрел на анализ страницы обзора, но проблема с перекрестным происхождением связана с AJAX, и это похоже на JSONP.

Answer 1

Если бы они действительно ни разоблачать публичного API, ни системы событий в их виджете, самый простой подход был бы опрос:

var tripAdvisorCheck = setInterval(function() { 
    $(".widSSPBullet").each(function() { 
     clearInterval(tripAdvisorCheck); 
     // do something with $(this) 
    }); 
}, 250); 

Это выполняется каждые 250 мс, до тех пор, по крайней мере, один .widSSPBullet не найден на странице , и в этот момент он отключает себя и позволяет делать то, что вы намерены делать с элементом.

Более высокотехнологичный подход состоял в том, чтобы наблюдать за созданием определенного элемента с использованием MutationObserver, недостатком является non-universal browser support (по крайней мере, в настоящее время), и это больше кода для записи.

Answer 2

<script type="text/javascript"> 
    var tripAdvisorCheck = setInterval(function() { 
     jQuery(".widSSPBullet").each(function() { 
    reviews = jQuery(".widSSPBullet li"); 
    index = 0; 
      showReviews(index, reviews); 
      clearInterval(tripAdvisorCheck); 
     }); 
    }, 250); 

     function showReviews(index, reviews) { 
       setInterval(function() { 
         jQuery("#tripAdvisorReviews").html(reviews[index]); 
         index++; 
         if (index == reviews.length) index = 0; 
        }, 
        5000); 
     } 
</script> 
<div id="tripAdvisorReviews" style="font-size:32px;color:white;"> 
</div> 

На странице есть что-то странное. Кажется, каждый раз: jQuery («# tripAdvisorReviews»). Html (отзывы [index]); выполняется соответствующий элемент li из ul class = "widSSPBullet" удаляется?

Что я действительно хотел бы, так это получить полную информацию из этой страницы: Link To TripAdvisor Page, чтобы я мог сделать своего рода карусель на своей странице. Вы, видимо, не можете получить это с помощью AJAX или JSONP?

Answer 3

Там на самом деле является API при условии:

TripAdvisor API

Это, вероятно, будет более эффективным подходом, если владелец может получить ключ API.