javascript - saber - obtener contenido de un iframe jquery
¿Cómo puedo detectar si un iframe está cargado? (3)
Estoy tratando de verificar si un iframe se ha cargado después de que el usuario hace clic en un botón.
yo tengo
$(''#MainPopupIframe'').load(function(){
console.log(''load the iframe'')
//the console won''t show anything even if the iframe is loaded.
})
HTML
<button id=''click''>click me</button>
//the iframe is created after the user clicks the button.
<iframe id=''MainPopupIframe'' src=''http://...'' />...</iframe>
¿Alguna sugerencia?
Por cierto, mi iframe se crea dinámicamente. No carga con la carga de la página inicial.
Imagino esto así:
<html>
<head>
<script>
var frame_loaded = 0;
function setFrameLoaded()
{
frame_loaded = 1;
alert("Iframe is loaded");
}
$(''#click'').click(function(){
if(frame_loaded == 1)
console.log(''iframe loaded'')
} else {
console.log(''iframe not loaded'')
}
})
</script>
</head>
<button id=''click''>click me</button>
<iframe id=''MainPopupIframe'' onload=''setFrameLoaded();'' src=''http://...'' />...</iframe>
Puedes probar el evento onload también;
var createIframe = function (src) {
var self = this;
$(''<iframe>'', {
src: src,
id: ''iframeId'',
frameborder: 1,
scrolling: ''no'',
onload: function () {
self.isIframeLoaded = true;
console.log(''loaded!'');
}
}).appendTo(''#iframeContainer'');
};
Puedes probar esto (usando jQuery )
$(function(){
$(''#MainPopupIframe'').load(function(){
$(this).show();
console.log(''laod the iframe'')
});
$(''#click'').on(''click'', function(){
$(''#MainPopupIframe'').attr(''src'', ''https://heera.it'');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id=''click''>click me</button>
<iframe style="display:none" id=''MainPopupIframe'' src='''' /></iframe>
Actualización: utilizando javascript simple
window.onload=function(){
var ifr=document.getElementById(''MainPopupIframe'');
ifr.onload=function(){
this.style.display=''block'';
console.log(''laod the iframe'')
};
var btn=document.getElementById(''click'');
btn.onclick=function(){
ifr.src=''https://heera.it'';
};
};
<button id=''click''>click me</button>
<iframe style="display:none" id=''MainPopupIframe'' src='''' /></iframe>
Actualización: También puedes probar esto (iframe dinámico)
$(function(){
$(''#click'').on(''click'', function(){
var ifr=$(''<iframe/>'', {
id:''MainPopupIframe'',
src:''https://heera.it'',
style:''display:none;width:320px;height:400px'',
load:function(){
$(this).show();
alert(''iframe loaded !'');
}
});
$(''body'').append(ifr);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id=''click''>click me</button><br />