Bonjour à tous, 

Je suis en train de faire un site qui présente les meilleurs joueurs de tennis. 

Ils sont recensés dans un tableau avec leurs informations principales.

J'aimerai qu'au clic sur le nom de l'un deux, une iframe de sa page Wikipédia s'affiche. Jusque là, j'ai réussi à le faire. 

Le problème étant que le chargement de la page est plus long car il charge toutes les iframes. 

Je souhaiterais donc écrire le code html plus tard pour éviter le chargement de toute les iframes ralentissant la page. 

Voici le code de la div qui contient l'iframe : 

<div class="pres-joueur djokovic">
	<a type="button" class="btnClose"></a>
	<div class="pres">
		<h1>
			Page <em>Wikipédia</em> de Djokovic :
			<a href="https://fr.wikipedia.org/wiki/Novak_Djokovic" class="wikiBlank" target="_blank"><i class="fas fa-external-link-alt"></i></a>
		</h1>
		<iframe src="https://fr.wikipedia.org/wiki/Novak_Djokovic" sandbox></iframe>
	</div>
</div>

EDIT : J'ai trouvé que l'on pouvait faire cela avec la fonction "write()" mais cela ne marche pas. 

Je vous met le code que j'ai fait :

write("<a type=\"button\" class=\"btnClose\"></a>" +
	"<div class=\"pres\">" +
		"<h1>" +
			"Page <em>Wikipédia</em> de Djokovic :" +
			"<a href=\"https://fr.wikipedia.org/wiki/Novak_Djokovic\" class=\"wikiBlank\" target=\"_blank\"><i class=\"fas fa-external-link-alt\"></i></a>\"" +
		"</h1>" +
		"<iframe src=\"https://fr.wikipedia.org/wiki/Novak_Djokovic\" sandbox></iframe>" +
	"</div>");

L'un de vous aurait une solution s’il-vous plaît ?

En vous remerciant d'avance, 

Cordialement, 

Romain.

-
Edité par Romainj78 1 avril 2020 à 21:16:23

Bonjour,

 Cet solution intègre l'iframe une fois que le DOM est entièrement chargé :

document.addEventListener("DOMContentLoaded", ()=> {
document.querySelector(".djokovic").innerHTML = 
 `<a type="button" class="btnClose"></a>
  <div class="pres">
    <h1>
      Page <em>Wikipédia</em> de Djokovic :
      <a href="https://fr.wikipedia.org/wiki/Novak_Djokovic" class="wikiBlank" target="_blank"><i class="fas fa-external-link-alt"></i></a>
    </h1>
    <iframe src="https://fr.wikipedia.org/wiki/Novak_Djokovic" sandbox></iframe>
  </div>`;
})

-
Edité par BenBgln 3 avril 2020 à 14:37:46

Bonjour.

Au lieu d'afficher les iframe au chargement de la page, fais plutôt en sorte de créer les éléments HTML et donc l'iframe lorsque l'utilisateur clique sur un lien, exemple ici.

Bonjour à tous les deux, 

Merci pour vos réponses. 

Les deux méthodes fonctionnent mais j'ai utilisé celle de Lartak.

Bonne journée