我在编写一些 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" 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。