在文档准备好 jQuery 后获取由外部 javascript src 呈现的元素

Question

我正在尝试从 TripAdvisor Widget 呈现的代码中获取一些 HTML 元素。

<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>

但是，看起来它直到文档准备就绪后才呈现，甚至可能在加载 window 之后。也许我做错了什么，但是有没有办法等到元素被加载然后用 jQuery 抓取它。理想情况下，我想通过小部件或来自 Trip Advisor 的 API 获得完整评论，但我认为他们没有提供。我查看了评论页面的解析，但是 AJAX 存在跨源问题，JSONP 似乎也是如此。

Answer 1

如果他们真的既不公开 public API 也不在他们的小部件中公开事件系统，最简单的方法是轮询：

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

它每 250 毫秒运行一次，直到在您的页面中找到至少一个 .widSSPBullet，此时它会自行禁用并允许您对该元素执行任何您想要执行的操作。

一种更高科技的方法是使用 MutationObserver, downside is 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(reviews[index]);执行 ul class="widSSPBullet" 中相应的 li 元素被删除 ?

我真正想要的是能够从此页面检索完整评论：Link To TripAdvisor Page 这样我就可以在我的页面上制作一种旋转木马。您显然无法使用 AJAX 或 JSONP ?

检索它

Answer 3

实际上有一个 API 提供：

TripAdvisor API

如果所有者可以获得 API 密钥，那可能是更好的方法。

在文档准备好 jQuery 后获取由外部 javascript src 呈现的元素

Getting element rendered by external javascript src after document ready jQuery

jquery

tripadvisor