Esta es la tarea para insertar contenido HTML en un iFrame usando jQuery. Para hacerlo, podemos usar el método jQuery content() .
El método .contents(): Devuelve todos los elementos secundarios directos, incluidos los Nodes de texto y comentarios para el elemento seleccionado.
Sintaxis:
$(selector).contents()
- Acercarse:
- Encuentra el iframe en la sección del cuerpo.
- Obtenga el valor que se insertará en el iframe en la sección del cuerpo
- Coloque el valor en el iframe
código jQuery para mostrar el funcionamiento de este enfoque:
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>How to insert HTML content
into an iFrame using jQuery?</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style type="text/css">
textarea,
iframe {
display: block;
margin: 10px 0;
}
iframe {
width: 500px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h3>
How to insert HTML content into an iFrame using jQuery
</h3>
<textarea rows="2" cols="40" style="text-align:center;">
GEEKSFORGEEKS - A computer science portal for geeks.
</textarea>
<button type="button" onclick="updateIframe()">
Click to Insert
</button>
<iframe style="text-align:center;" id="myframe"></iframe>
<script type="text/javascript">
function updateIframe() {
var myFrame = $("#myframe").contents().find('body');
var textareaValue = $("textarea").val();
myFrame.html(textareaValue);
}
</script>
</center>
</body>
</html>
Salida:
Antes de hacer clic en el botón: 
Después de hacer clic en el botón:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>How to insert HTML content
into an iFrame using jQuery?</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style type="text/css">
iframe {
width: 500px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h3>How to insert HTML content
into an iFrame using jQuery</h3>
<h4>Text to be insert : "GEEKSFORGEEKS
- A computer science portal for geeks."</h4>
<iframe style="text-align:center;" id="iframe">
</iframe>
<script>
$("#iframe").ready(function() {
var body = $("#iframe").contents().find("body");
body.append(
'GEEKSFORGEEKS - A computer science portal for geeks.');
});
</script>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA