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

Posted 2023-05-09

【中文标题】jQuery iframe 在 chrome 中加载，但不在 FF 和 IE 中

【英文标题】：jQuery iframe loading in chrome, but not in FF and IE

【发布时间】：2012-11-03 18:12:37

【问题描述】：

我在编写一些 jquery 编码以允许在不同的嵌入式 iframe 之间使用它们在 jquery 中的 id 进行切换时得到了一些帮助。

<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"   id="button1" /></a>
<a href="#"><img src="Images/2Gluttony.png"   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。

【参考方案1】：

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

试试这个：Reload an iframe with jQuery

【参考方案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;
    
);