javascript - 如何在内容加载后加载 HTML

Question

我正在尝试获取网站上的内容列表(this one 如果有人感兴趣)。布局最近发生了变化，现在他们不会一次加载所有内容，而是使用魔法(可能是 js)。我目前正在使用 JSoup分析 HTML，但我愿意接受建议。

这是我得到的:

<div class="row" data-v-6e4dbe9e>
 <div class="col-17 podcasts-group" data-v-6e4dbe9e>
  <div class="loading-spinner" data-v-6e4dbe9e>      //the devil himself
   <div class="spinner" data-v-ac3cb376 data-v-6e4dbe9e>
    <div class="rect1" data-v-ac3cb376></div>
    <div class="rect2" data-v-ac3cb376></div>
    <div class="rect3" data-v-ac3cb376></div>
    <div class="rect4" data-v-ac3cb376></div>
    <div class="rect5" data-v-ac3cb376></div>
   </div>
  </div>
  <div mode="in-out" class="transition-group row" data-v-6e4dbe9e>
   //Here should be stuff!
  </div>
 </div>
</div>

实现这个的代码:

String selector = "div.podcasts-items";
Elements elem = Jsoup.connect(link).get().select(selector)
System.out.println("html: "+elem.html());

这是我希望看到的(在页面加载所有内容后从检查元素复制):

<div class="row" data-v-6e4dbe9e>
 <div class="col-17 podcasts-group" data-v-6e4dbe9e>
  <!---->  //begone evil!
  <div mode="in-out" class="transition-group row" data-v-6e4dbe9e>
   <div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
   <div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
   <div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
   <div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
  </div>
 </div>
</div>

Google 帮不上什么忙，因为所有与微调器等相关的内容都是关于 javascript 的。

解决方法:

由于 JSoup 仅加载 HTML 且不执行任何 javascript，页面从未有机会加载内容。您将不得不使用实际的浏览器引擎或像 selenium 这样的网络驱动程序来加载数据。

对于这个特定问题，我能够通过此网页的 API 加载 Json 数据直接获取内容。

Answer 1

如果我理解您的问题，那么您最好的选择是使用 Selenium 驱动程序。 Link to similar question