JSFiddle - React, Tailwind, and code Playground
CSS
iframe {
width: 100%;
}
JavaScript
const urls = [
"https://fr.wikipedia.org/wiki/Hyper_Text_Coffee_Pot_Control_Protocol#bodyContent",
"https://fr.wikipedia.org/wiki/Gabarit_(mise_en_page)#bodyContent",
"https://fr.wikipedia.org/wiki/Void#bodyContent"
]
const iframe = document.createElement("iframe")
const status = document.createElement("p")
// Interval en ms entre chage changement d'iframe
const interval = 4 * 1000
// Index de l'iframe actuellement affichée
let currentUrlIndex = 0
const changeIframeUrl = () => {
// On récupère l'url de l'iframe suivante à afficher
// On incrément aussi au passage l'index pour le prochain chargement
const url = urls[currentUrlIndex++]
// L'iframe précédente était la dernière de la liste
if (!url) {
status.innerHTML = `C'était la dernière iframe <button>Cliquez ici pour recommencer</button>`
currentUrlIndex = 0
const button = status.querySelector("button")
button.onclick = changeIframeUrl
return
}
// On met à jour l'url de l'iframe
status.textContent = "Chargement de la prochaine iframe"
iframe.src = url
// On lanceras le chargement de l'iframe suivante uniqueùent après
// que celle actuelle ais fini de charger
iframe.onload = () => {
status.textContent = `Iframe chargée -> ${url}`
setTimeout(changeIframeUrl, interval)
}
iframe.onerror = () => {
status.textContent = `Une erreur est survenue lors du chargement de : ${url}`
setTimeout(changeIframeUrl, interval)
}
}
// On insère dans la page notre balise <p> et notre balise <iframe>
// et lance le chargement en continue des iframes
document.body.append(status, iframe)
changeIframeUrl()