Vamos a ver cómo puedes actualizar dos fotogramas a la vez.
Enfoque: tomamos dos iframes con nombres de identificación únicos, es decir, «frame1» y «frame2», ambos alineados con el centro de nuestra página y un botón. Cuando hacemos clic en el botón, las URL de los iframes se reemplazan con otras URL.
Código HTML: en este código, adjuntamos un detector de eventos al botón. Cuando hacemos clic en el botón, el contenido del cuerpo debe cambiarse a las URL de dos iframes simultáneamente usando el atributo src de ambos iframes.
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="display:flex;
justify-content:center;color:green;">
GeeksforGeeks
</h1>
<div style="padding:10px;border:2px solid green;">
<div style="display:flex;flex-wrap:wrap;
justify-content:center;">
<iframe src=
"https://www.youtube.com/embed/aMn7sO1d4Yc" id="frame1">
</iframe>
<div style="width:10px;">
</div>
<iframe src=
"https://www.youtube.com/embed/8Pv96bvBJL4" id="frame2">
</iframe>
</div>
<button style="margin-left:50%;margin-right:30%;
margin-top:10px;" id="update">
Click me
</button>
</div>
<script>
document.getElementById('update')
.addEventListener('click', function () {
// Change src attribute of iframes at a same time
document.getElementById('frame1').src =
'https://www.youtube.com/embed/QS8xU4TqnQE';
document.getElementById('frame2').src =
'https://www.youtube.com/embed/3w0XfBU2ufw';
});
</script>
</body>
</html>
Producción:
Producción
Nota: podemos actualizar el contenido del marco con la etiqueta <a> con el atributo de destino . La URL que queremos abrir dentro del iframe reemplazará a la URL del iframe previamente presente. Hacemos clic en el enlace » clickme» , el «b.html» se reemplaza por «a.html».
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA