iframe在Firefox上不加载/wierd行为

iframe在Firefox上不加载/wierd行为,firefox,iframe,Firefox,Iframe,我试图构建一个简单的页面,用户点击一些“按钮”,加载相应的iframe。(网址:) 所有这些都在Chrome上运行良好&在IE上也足够令人惊讶,不过Firefox似乎没有加载任何iframe 现在,我正在做的是让几个元素包含用户必须点击的“按钮”: <ul> <li class="gamelink hangman-game" data-id="1418235" data-game="hangman"></

我试图构建一个简单的页面,用户点击一些“按钮”,加载相应的iframe。(网址:)

所有这些都在Chrome上运行良好&在IE上也足够令人惊讶,不过Firefox似乎没有加载任何iframe

现在,我正在做的是让几个元素包含用户必须点击的“按钮”:

<ul>
 <li class="gamelink hangman-game" data-id="1418235" data-game="hangman"></li>
 <li class="gamelink crossword-game" data-id="1418235" data-game="crossword"></li>
 <li class="gamelink bugmatch-game" data-id="1418235" data-game="bugmatch"></li>
 <li class="gamelink hungrybug-game" data-id="1418235" data-game="hungrybug"></li>
</ul>
我的JS:

$(document).ready(function(){
    window.gamesinfo={'crossword': ['Crossword','Fill in the words blah blah'],'hangman': ['Hangman','Try to guess the word 1 letter at a time'],'bugmatch': ['Bug Matc','Eat the bug that corresponds to the answer'],'hungrybug': ['Hungry Bug','blah blah'],'wordscramble': ['Word Scramble','ajoidoas'],'studyslide': ['Study Slide','study the words '],'studymatch': ['Match','do the matching']};
    window.gamesdimensions={'crossword': [950,540],'hangman': [520,540],'bugmatch': [800,500],'hungrybug': [890,600],'wordscramble': [720,400],'studyslide': [1040,800],'studymatch': [752,670]};
    $('.gamelink').click(function(){
        $('#game').html('<iframe src="https://www.studystack.com/i'+$(this).attr('data-game')+'-'+$(this).attr('data-id')+'" width="'+window.gamesdimensions[$(this).attr('data-game')][0]+'" height="'+window.gamesdimensions[$(this).attr('data-game')][1]+'" frameborder="0" scrolling="no" style="overflow:hidden;"><style>#highScoreFrame{display: none!important;</style></iframe>');
        gameloaded($(this).attr('data-game'),$(this).attr('data-id'));  
    })
    $('#togglehelp').click(function(){
        $('#instructions').toggle();
     });
})
function gameloaded(game,id){
$('#instructions').html(window.gamesinfo[game][1]);
$('#game').width($('#game iframe').first().width())
$('#moregames').show();
$('#instructions').hide();
$('#moregames .gamelink').each(function(){
    $(this).attr('data-id',id);
})
}
$(文档).ready(函数(){
window.gamesinfo={'crossword':['crossword','Fill the words blah blah'],'hangman':['hangman','Try to猜单词一次一个字母'],'bugmatch':['Bug Matc','Eat the Bug that the response'],'hungrybug':['Hungry Bug','blah blah'],'wordscramble':['wordscramble','wordscramble','单词拼凑','ajidoas','Study Slide','Study Slide',','studymatch':['Match','do the Match']};
games维度={'crossword':[950540],'hangman':[520540],'bugmatch':[800500],'hungrybug':[890600],'wordscramble':[720400],'studyslide':[1040800],'studymatch':[752670]};
$('.gamelink')。单击(函数(){
$('#game').html('#highScoreFrame{display:none!important;');
gameloaded($(this.attr('data-game'),$(this.attr('data-id'));
})
$(“#切换帮助”)。单击(函数(){
$(“#指令”).toggle();
});
})
已加载游戏功能(游戏,id){
$(“#说明”).html(window.gamesinfo[game][1]);
$('#game').width($('#game iframe').first().width())
$(“#更多游戏”).show();
$(“#指令”).hide();
$('#moregames.gamelink')。每个(函数(){
$(this.attr('data-id',id);
})
}
韦尔德行为:

  • 在本地主机上运行良好
  • 如果我试图在加载iframe的元素上调用click事件,请键入 $('.gamelink').eq(4)。单击() 在控制台中,我什么也得不到,但是如果我在前4个元素中的一个上调用它,iframe将加载(缺少一个参数,它将显示一条错误消息,但这很好,因为前4个按钮故意缺少该参数,在加载第一个iframe后由JS填充)
  • 我尝试了在类似问题中找到的一些建议,例如放置一个带有display:none的空iframe;在我要加载的iframe之前,用“&”替换“&”等等,似乎没有任何效果

    任何帮助都将不胜感激,提前感谢