iFrame中的内容在Chrome中显示，但不在Firefox中显示 [英] Content in iFrame shows in Chrome but not in Firefox
问题描述
以下是关于iframe问题的标准问题的答案列表：
- 父页面和子页面（iframe中的页面）位于相同的域，子域和目录中。
- 不存在通过iframe交换的xml，vtt等。
- 服务器是S3，CORS已启用，但我认为这种情况并不重要。
我有一个测验（子页面）这是通过主页面（父）访问。
子： https://glx.s3.amazonaws.com/ff/jqm。 HTML
家长： https://glx.s3.amazonaws.com/ff/draft.html code>
iframe包含在手风琴中。手风琴，测验，iframe等都在Chrome中全面运行。在Firefox中时，iframe不显示测验。更奇怪的是，在极少数情况下，测验会出现，但一旦刷新就会消失。
我有一个页面的演示没有真正的内容。 iframe以红色文本显示。提前致谢。
JS ：jQuery 2.1.4，jQuery UI 1.11.2，JWPlayer 6.12，jQuizMe 2.2.1
更新：我不考虑这个答案*只是解决我的特定问题。我知道除此之外，还有更多的事情要做，比我更聪明的人有更好的答案。
*请参阅下面的编辑。
编辑
4个月后，除我自己以外，我自己回答。
我发现这个 post ，其中介绍了如果Firefox在SSL加密网站上未加密内容时阻止iframe内容的方式。但是，我的所有网址都是https，包括iframe的src。所以最终我把它缩小到了子页面的源头。我在初始化jQuizMe插件时使用了3套选项，而只需要一套。 Firefox的混合内容拦截器的严格安全性认为我的草率代码是混合活动内容（又名混合脚本内容）。因此，我将所有选项都放在一组括号中，现在我在使用Firefox时在iframe中包含了内容。 >
子页面上的旧JS（jqm.html）
<$ c
$ true $ b $ showAn：true，
showAns：true，
{
var $ = {
varOfQuizQues：12，
disableDelete：true，
showWrongAns：
review：true
};
var quiz = {
multiList：[
{
ques：QUESTION？，
ans： C，
ansSel：[A，B，D，E]
}，
{
ques：问题？，
ans：C，
ansSel：[A，B，D，E]
}，
{
问题：问题？，
答：C，
ansSel：[A，B，D，E]
}，
{
ques：QUESTION？，
ans：C，
ansSel：[A，B，D，E]
}，
{
ques：QUESTION？，
ans：C，
ansSel：[A，B，D，E]
} ，
{
ques：QUESTION？，
ans：C，
ansSel：[A，B，D，E]
}
$ $ $ b $ ques：QUESTION？
ans：C $ $ $ $ $ ansSel：[A，B，D ，E]
}，
{
ques：QUESTION？，
ans：C，
ansSel：[A，B ，D，E]
}，
{
ques：QUESTION？，
ans：C，
ansSel：[ A，B，D，E]
}，
{
ques：QUESTION？，
ans：C，
ansSel：[A，B，D，E]
}，
{
ques：QUESTION？，
ans：C，
ansSel：[A，B，D，E]
$
$
ques：QUESTION？，
ans：C，
ansSel：[A，B，D， E]
}，
]，
}，
options = {
allRandom：true，
title：''
};
options.showHTML = true;
$（。quizArea）。jQuizMe（测验，选项）;
}）;
修正JS
$（function（$）{
var quiz = {
multiList：[
{
ques：QUESTION？，
ans：C，
ansSel：[A，B，D，E]
}，
{
ques：QUESTION？，
ans：C，
ansSel：[A，B，D，E]
}，
$ b $ ques：QUESTION？，
ans：C，
ansSel：[A，B，D，E]
，
{
ques：QUESTION？，
ans：C，
ansSel：[A，B，D，E ]
}，
{
ques：QUESTION？，
ans：C，
ansSel：[A，B， D，E]
}，
{
ques：QUESTION？，
ans：C，
ansSel：[A，B，D，E]
}，
{
ques：QUESTION？，
ans：C，
ansSel：[A，B，D，E]
} ，
{
ques：QUESTION？，
ans：C，
ansSel：[A，B，D，E]
}
$ $ $ b $ ques：QUESTION？
ans：C $ $ $ $ $ ansSel：[A，B，D ，E]
}，
{
ques：QUESTION？，
ans：C，
ansSel：[A，B ，D，E]
}，
{
ques：QUESTION？，
ans：C，
ansSel：[ A，B，D，E]
}，
{
ques：QUESTION？，
ans：C，
ansSel：[A，B，D，E]
}，
]，
}，
options = {
allRandom：true，
title：''，
numOfQuizQues：12，
disableDelete：true，
showWrongAns：true，
showAns：true，
评论：true，
showHTML：true
};
$（。quizArea）。jQuizMe（测验，选项）;
}）;
Here's the list of answers to the standard questions concerning iframe questions:
- The parent page and child (the page inside the iframe) are in the same domain, sub-domain and directory.
- There is no xml, vtt, etc. being exchanged through the iframe.
- The server is S3, CORS is enabled but I don't think it matters in this situation.
I have a quiz (child page) that is accessed through the main page (parent).
Child: https://glx.s3.amazonaws.com/ff/jqm.html
Parent: https://glx.s3.amazonaws.com/ff/draft.html
The iframe is contained in an accordion. The accordion, the quiz, the iframe, etc. are all fully functional in Chrome. When in Firefox, the iframe shows no quiz. Stranger yet, on very rare occasions the quiz does appear but it disappears once refreshed. I have a demo of the page sans real content. The iframe is indicated in red text. Thanks in advance.
JS: jQuery 2.1.4, jQuery UI 1.11.2, JWPlayer 6.12, jQuizMe 2.2.1
UPDATE: I'm not considering this an answer* just a solution to my specific problem. I know there must be more to this than that and there's plenty of smarter people than I out there that have a better answer.
*See edit below.
EDIT
After 4 months there has been no answer other than my own, so I'll answer it myself.
I found this post which clued me in on how Firefox blocks iframe content if it's unencrypted content on a SSL encrypted website. However, all of my URLs are https including the iframe's `src'. So eventually I narrowed it down to the source of the child page. I used 3 sets of options while initializing the jQuizMe plugin while only one is required. The strict security of Firefox's Mixed Content Blocker considered my sloppy code to be Mixed Active Content (a.k.a. Mixed Script Content). So I put all of my options in one set of brackets and now I have content in the iframe while using Firefox.
JS
Old JS on child page (jqm.html)
$(function($){
var options = {
numOfQuizQues: 12,
disableDelete: true,
showWrongAns: true,
showAns: true,
review: true
};
var quiz = {
multiList: [
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
],
},
options = {
allRandom: true,
title: ' '
};
options.showHTML = true;
$(".quizArea").jQuizMe(quiz, options);
});
Revised JS
$(function($){
var quiz = {
multiList: [
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
{
ques: "QUESTION?",
ans: "C",
ansSel: ["A","B","D","E"]
},
],
},
options = {
allRandom: true,
title: ' ',
numOfQuizQues: 12,
disableDelete: true,
showWrongAns: true,
showAns: true,
review: true,
showHTML: true
};
$(".quizArea").jQuizMe(quiz, options);
});
这篇关于iFrame中的内容在Chrome中显示，但不在Firefox中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
