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

juillet 4, 2019février 10, 2020 Amine KOUIS Aucun commentaire

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.