通过遍历Java脚本显示不同的Review表

时间:2019-05-19 10:03:59

标签: javascript html css

我有3个表,其中包含评论:

https://www.top2rotten-traders.co.uk/trader-view-review?i=1
https://www.top2rotten-traders.co.uk/trader-view-review?i=2
https://www.top2rotten-traders.co.uk/trader-view-review?i=3

我想像幻灯片一样循环浏览主页上这些页面上的表格。

我已经通过将表格转换为图像使它成功工作,但是我宁愿让它遍历实际数据,而不必费心制作jpg文件等。

  <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script type="text/javascript">
    var index=0;
    function changeBanner(){ 
      [].forEach.call(document.images,function (v,i) { document.images[i].hidden = i!==index});
      index = (index+1) % document.images.length;
    }
    window.onload = function () {setInterval(changeBanner, 1000)};
  </script>
</head>
<body>
  <div id="wrapper">
    <div>
        <img src="http://blog.4pm.ie/wp-content/uploads/2013/01/Mona-Lisa1.jpg" width="900px" height="300px" />
      <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRNdgz5xts4e3lP262ex-PaDSxoQoowWgOsJ124473AkFYx9SRauA" width="900px" height="300px" />
      <img src="http://cache.graphicslib.viator.com/graphicslib/media/5c/the-last-supper-mural-by-leonardo-da-vinci-santa-maria-photo_1344348-770tall.jpg" width="900px" height="300px" />
    </div>
  </div>
</body>
</html>

我希望在首页上看到一张表格,每隔几秒钟就会循环到下一张表格。

1 个答案:

答案 0 :(得分:0)

这是您获取表格并将其放入您的网站的方式:

const urls = ["https://www.top2rotten-traders.co.uk/trader-view-review?i=1",
"https://www.top2rotten-traders.co.uk/trader-view-review?i=2", "https://www.top2rotten-traders.co.uk/trader-view-review?i=3" ]

for (const [index, url] of urls.entries()) {
  const html = fetch(url).then((response) => { 
    const parser = new DOMParser();
    const doc = parser.parseFromString(response.text());
    const table = doc.querySelector('#view-review');
    // make sure your don't have duplicate ids before inserting
    table.id += index;
    wrapper.querySelector('div').appendChild(table);
  })
}

当然,由于相同的原产地政策,该示例无法在此处工作。

如果脚本仅在同一域中托管的页面上运行,它将起作用。