问题

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.

DEMO

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.

回答1:

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);
});

来源：https://stackoverflow.com/questions/31529917/content-in-iframe-shows-in-chrome-but-not-in-firefox

标签

javascript