javascript - create - Cómo borrar el contenido de un iFrame de otro iFrame
iframe responsive (2)
Intenta usar la mensajería del canal
wrapperPage.html
<body>
<div class=non-floater>
<iframe class="header" src="header.html"></iframe>
<iframe class="pageBody" src="pageBody.html" />
</div>
<script>
var channel = new MessageChannel();
var header = $(".header")[0].contentWindow;
var pageBody = $(".pageBody")[0].contentWindow;
header.onload = function() {
this.postMessage("","*", [channel.port2])
};
channel.port1.onmessage = function(e) {
if (e.data === "clicked") {
$(pageBody.document.body).html("")
}
}
</script>
</body>
header.html
<body>
<a class="clearLink" href="#">Navigation Button</a>
<script>
var port;
onmessage = function(e) {
port = e.ports[0];
}
$(".clearLink").on("click", function(e) {
port.postMessage("clicked");
});
</script>
</body>
Tengo un
wrapperPage.html
con un
<iframe class="header"
y
<iframe class="pageBody"
.
En el
header
hay un enlace,
<a class="clearLink"
, que cuando se hace clic debe borrar el contenido de
pageBody
.
Hasta ahora, la siguiente implementación de la idea anterior no funciona. Por favor ayúdame a resolver esto.
TENGA
pageBody
CUENTA
que el
header
y el
pageBody
se cargan desde diferentes archivos incluidos.
wrapperPage.html
<div class=non-floater>
<iframe class="header" src="header.html"></iframe>
<iframe class="pageBody" src="pageBody.html" />
</div>
header.html:
<script type="text/javascript">
$(document).ready(function() {
$(".clearLink").on("click", function() {
$(''.pageBody'').contents().find("body").html('''');
});
});
</script>
<a class="clearLink" href="#">Navigation Button</a>
pageBody.html:
<div class="panel-body">This is the body</div>
Puede obtener la referencia de la ventana principal de un iFrame de la siguiente manera: Ventana. Referencia del padre
Luego, puede asignar un evento para capturar un activador o una función en la ventana principal (o solo en el otro iFrame) para administrarlo.
Por ejemplo :
- Escriba una función en pageBody.html asociada a un evento personalizado.
-
Obtenga una referencia de ventana de su función de clic en su
header.htmliFrame. - Busque el elemento de destino que tiene asignado su evento personalizado.
- Dispara el evento
Espero que te ayude.