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>

デモはこちら

上記のコードは、IE9 および IE8 の他のブラウザーでも正常に動作しますが、IE7 では正常に動作しません。どうすればこれを修正できますか?

4

1 に答える 1

1

コードにこの部分がある理由がわかりません：

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

しかし、#lazyがないのでsrc、これが IE7 で壊れる部分かもしれません。iframe が html で宣言される前にそのコードが実行されるため、他のブラウザーが機能する可能性があります。

あなたが望むのはこれだと思います：

HTML

ここで data-src を clickable に移動しました<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 に答える