0 
<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>

演示在这里jsfiddle

上面的代码在其他浏览器中也可以在 IE9 和 IE8 中运行良好，但在 IE7 中则不行。我该如何解决 ？

4

1 回答 1

1

我不知道为什么你的代码中有这部分：

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

但是由于#lazyhas no src，这可能是在 IE7 上破坏它的部分。其他浏览器可能会工作，因为这段代码是在 html 中声明 iframe 之前执行的。

我想你想要的是这样的：

HTML

在这里，我将 data-src 移动到可点击的位置<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'));
    });
});

在$(function() { });文档加载时执行的位置。不要只是在 HTML 中间调用一个函数，总是考虑使用$(function() {});

我也不明白你为什么这样做，function() { return $(this).data('src') }而你可以这样做$(this).data('src')，所以我也更正了。

jsFiddle在这里

于 2013-04-18T06:06:21.867 回答