Question

我已经有一些帮助编写一个小jQuery编码，以允许切换不同的嵌入式iframe使用他们的ID在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。

Answer 1

尝试这样的事情

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

Answer 2

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

试试这个：Reload an iframe with jQuery