0

jquery の ID を使用して異なる埋め込み iframe を切り替えて切り替えることができるように、小さな jquery コーディングを作成するのを手伝ってもらいました。 

<div id="sins">
<iframe width='860' height='560' frameBorder='0' src='http://a.tiles.mapbox.com/v3/eibenm.Lust.html#4/36.13779999999999/-95.88870000000001' id="Image1" ></iframe>      
<iframe width='860' height='560' frameBorder='0' src='http://a.tiles.mapbox.com/v3/eibenm.Gluttony.html#4/36.13779999999999/-95.88870000000001' id="Image2" ></iframe>
</div><!-- sins -->

<div id="links">
<a href="#"><img src="Images/1Lust.png" width="160" height="50" id="button1" /></a>
<a href="#"><img src="Images/2Gluttony.png" width="160" height="50" id="button2" /></a> 
</div><!-- links -->

// this block will cause the sins maps to fade
// into each other on button clicks
$(document).ready(function() {
    $('#Image1').fadeIn(1500);
    var curr_img_id = 'Image1';
    $('#links img').click(function() {
        if($(this).attr('id').match(/(\d)$/)) {
            var new_img_id = 'Image' + RegExp.$1;
            $('#' + curr_img_id).fadeOut(1000, 0.0, function() {
                $('#' + new_img_id).fadeIn(1000);                   
            });
            curr_img_id = new_img_id;
        }
    });
});

完全なコードについては、http: //users.humboldt.edu/eibenm/sheepallenge.htmlを参照してください。

問題は、このコードが chrome と safari で完全に機能することですが、IE と FF で問題が発生しています。最初の iframe は期待どおりに読み込まれますが、リンクをクリックして別のリンクに切り替えると、読み込まれません。IE で動作しなくても問題ありませんが、FF との互換性を維持したいと考えています。どんな助けでも大歓迎です！

さらに、これが何かに影響するかどうかはわかりませんが、埋め込まれた iframe は mapbox.js を使用する mapbox を介して行われます。

4

2 に答える 2

2

リンクをクリックすると、フレームは完全に読み込まれますが、ここでの問題は、このフレームのソースが正しくレンダリングされていないことです。そのため、ナビゲーションリンクをクリックするたびにiframeを手動でリロードする必要があります。テスト目的で、フレームを右クリックして[再読み込み]をクリックするだけで、画像が表示されます。あなたはコードを介して同じことをしなければなりません）

これを試してください： jQueryを使用してiframeをリロードします

于 2012-11-15T07:10:47.710 に答える
0

このようなことを試してください

$('#links img').click(function() {
    if($(this).attr('id').match(/(\d)$/)) {
        var new_img_id = 'Image' + RegExp.$1;
        $('#' + curr_img_id).fadeOut(1000, 0.0, function() {
            $('#' + new_img_id).fadeIn(1000);

            // hack for your code
             var iframe = document.getElementById(new_img_id);
             iframe.src = iframe.src;   
        });
        curr_img_id = new_img_id;
    }
});
于 2012-11-15T07:06:35.110 に答える