Question

我有一些帮助编写一个小的jquery编码，允许在jquery中使用它们的id来切换不同的嵌入式iframe。

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

Answer 1

当你点击链接时，框架正在加载完美，但这里的问题是这个框架的源不能正确渲染。因此，每次单击导航链接时都需要手动重新加载iframe。出于测试目的，只需右键单击框架并单击重新加载，您将看到图像。你必须通过代码来做同样的事情）

试试这个：Reload an iframe with jQuery

Answer 2

尝试这样的事情

$('#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;
    }
});

jQuery iframe在chrome中加载，但在FF和IE中没有

2 个答案: