charge Lazy pour iframe ne fonctionne pas dans IE7

Question

<style> 
.desgin_iframe_dimn { 
background: white; 
height: 500px; 
width: 500px; 
} 
</style> 
<iframe scrolling="no" id="lazy" class="desgin_iframe_dimn" data-src="http://www.google.com"></iframe> 
<p class="lazy">Click Here</p> 
<script> 
function LazyLoadIframe() { 
$('.lazy').click(function() { 
    $('#lazy').attr('src', function() { 
     return $(this).data('src'); 
    }); 
}); 

$('#lazy').attr('data-src', function() { 
    var src = $(this).attr('src'); 
    $(this).removeAttr('src'); 
    return src; 
}); 

} 
LazyLoadIframe(); 
</script> 

Demo est ici jsfiddle

code ci-dessus fonctionne bien dans d'autres navigateurs aussi dans IE9 & IE8, mais pas dans IE7. Comment puis-je réparer ça ?

Answer 1

Je ne sais pas pourquoi vous avez cette partie dans votre code:

$('#lazy').attr('data-src', function() { 
    var src = $(this).attr('src'); 
    $(this).removeAttr('src'); 
    return src; 
}); 

Mais depuis #lazy n'a pas src, cela pourrait être la partie qu'il se brise sur IE7. D'autres navigateurs peuvent fonctionner car ce morceau de code est exécuté avant que l'iframe ne soit déclaré dans le code html.

Je pense que ce que vous voulez est le suivant:

HTML

Ici je me suis déplacé les données-src à cliquable <p>:

<iframe scrolling="no" id="lazy" class="desgin_iframe_dimn"></iframe> 
<p class="lazy" data-src="http://www.wikipedia.com/">Click Here</p> 

Javascript

$(function() { 
    $('.lazy').click(function() { 
     $('#lazy').attr('src', $(this).data('src')); 
    }); 
}); 

Où $(function() { }); est exécuté sur le chargement du document. Ne vous contentez pas d'appeler une fonction au milieu du HTML, considère toujours utiliser $(function() {});

Je ne comprends pas pourquoi vous avez fait function() { return $(this).data('src') } pendant que vous pouvez juste faire $(this).data('src'), donc je corrigeais aussi.

jsFiddle here