How to copy div from iframe to parent? (replicate) can be using ajax, jquery, javascript

Question

I have an index.php that does a post in.php content, and takes the result and writes to the div #content inside index.php.

Post:

<script type="text/javascript">


	$(this).on('load',function(){
		
		var dadosLink = 'nada';
		
		$.ajax({
			
			url:'conteudo.php',
			method: 'POST',
			data:{ dados:dadosLink},
			success: function(data)
				{
				
				$("#conteudo").html(data);
				
				}, 
				
				error: function(data)
				
				{
				$("#conteudo").html(data);
					}
			
		});
		
		});


	  </script>

in the content. php, I have:

<?php require_once('Connections/Gymo.php'); 
$aba = $_POST['dados'];

 if ($aba == "nada") {
	
	echo "
	<IFRAME name=Destaques frameBorder=0 style=\"overflow: scroll; height: 100vh; width: 100vw;\"  scrolling=auto src=\"inicio.php?dados=".$aba."&mercado=".$mercado."&email=".$email."\">
<div align=\"center\"></div>
</IFRAME>

	
	";
?>

within the start.php iframe, I have:

<div class = "conteudo" id = "conteudo"> Quero replicar esta div para index.php com o mesmo id </div>

My question: How to make the contents of this div contained in iframe passed to the div #content contained in index.php, replacing its values, whatever they are?

This action would have to happen when activating the ajax function of iframe: "$(this). on('load',Function()..."

Answer 1

First you need to take all the content that comes within the iframe, in this case it is yours div.

You can do it this way:

var iframeContent = $(data).text(); // aqui vai retornar todo conteúdo dentro do iframe

After that, take all the content that’s inside your div of iframe and put in the div destination.

var divContent = $(iframeContent).text(); // aqui temos todo o conteúdo da div do iframe

$("#conteudo").empty().html(divContent); // limpando a div de destino e colocando o conteúdo da div do iframe.