Comment insérer du contenu HTML dans un iFrame avec jQuery

Vous pouvez utiliser la méthode contents() de jQuery en combinaison avec les méthodes find(), val() et html() pour insérer du texte ou du HTML dans le corps de « iframe ».
 
 

Code source :
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insérer du contenu HTML dans un iFrame</title>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			function majframe(){
				var frame = $("#frame").contents().find('body');
				var text = $('p').text();
				frame.html(text);
			}
		</script>
	</head>
	<body>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, quam eget tristique facilisis, augue magna tempor sapien, non ultricies lacus mi ut lorem. Morbi ligula odio, malesuada vitae nulla sed, ullamcorper sodales urna. Proin at lectus dui. Pellentesque rutrum purus sit amet erat convallis, nec volutpat sapien vulputate.</p>
		<button type="button" onclick="majframe()">insérer le contenu</button>
		<iframe style="border: 1px solid #000; width: 550px;" id="frame"></iframe>
	</body>
</html>
Résultat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, quam eget tristique facilisis, augue magna tempor sapien, non ultricies lacus mi ut lorem. Morbi ligula odio, malesuada vitae nulla sed, ullamcorper sodales urna. Proin at lectus dui. Pellentesque rutrum purus sit amet erat convallis, nec volutpat sapien vulputate.

QCM jQueryQCM jQuery – Partie 1QCM sur jQuery avec des réponses pour la préparation des test techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus
Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *