Display different Review tables by looping through with Java Script
Question
I have 3 tables which contain reviews:
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
I want to loop through the tables on these page on the home page like a slide show.
I have got it to work successfully by turning the tables into images, but I'd rather have it loop through actual data rather than have to fiddle around making jpg files etc.
<!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>
I am expecting to see 1 table on the home page which every few seconds loops through to the next table.
1 answers
solution1
0 2019-05-19 10:23:17
This is how you can fetch the table and put it in your website:
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); }) }
Of course the example cannot work here due to same origin policy.
It would work if the script runs on a page hosted on the same domain only.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.