Iframe Contents Cant Appear in Firefox

In firefox, the code in iframe of my website can't be loaded properly, but success to be loaded if the iframe is unhidden and reload the iframe again

iframeLoaded()

Update 2

OP explained that the iframe must be invisible initially. While this may seem an impossibility since iframes do not load when it or one of it's ancestor elements are display: none;. The key word is invisible which is a state in which the iframe is not visible.... There are three CSS properties that come to mind and one of them is actually shouldn't be used in this situation.

display: none; This is the property being used by OP and this property actually hinders the iframe's loading. The reason why is when in that state of invisibility, the iframe is not in the DOM according to Firefox's behavior.
opacity: 0; This property renders the iframe invisible as well and Firefox seems to recognize the invisible iframe just fine.
visibility: hidden; This seems to be an acceptable as well....

So try this code that I use to suppress the FOUC:

Child Page

function init(sec) {
    var ms = parseFloat(sec * 1000);
    setTimeout('initFadeIn()', ms);
}

function initFadeIn() {
    $("body").css("visibility","visible");
    $("body").fadeIn(500);
 }

HTML

<body style="visibility: hidden;" onload="init(2);">

Update 1

I made an alternative solution because I hate leaving a demo that doesn't completely work★.
Ok this relies on cal.php window.onload event which is basically the slowest but the most stablest phase of loading there is.
Initially, #overlay will block any user interaction while calF is loading.
Once calF is completely loaded, it will call iframeLoaded function that's located on the parent page.
iframeLoaded will remove #overlay (I added a setTimeout for good measure but it's probably not necessary.)

I'm not that familiar with PHP syntax, so you'll have to modify the following code✶ and place it in cal.php

window.onload = function() {
    parent.iframeLoaded();
}

Then on the parent page:

function iframeLoaded() {
   setTimeout(function() { 
      $('#overlay').hide(750);
   }, 1500);
}

The code above as well as the required HTML and CSS is in the snippet below.

★ Note: The code in the snippet should work, but this snippet won't of course because there's some code that needs to be on the child page. That's just a shoutout to all the downvoters out there ;-)

Snippet 1

// iframeLoaded will remove the overlay when cal.php has completely loaded 
function iframeLoaded() {  setTimeout(function() {    $('#overlay').hide(750);  }, 1500); //<========[1 to 2 (1000 - 2000ms) seconds should give you plenty of time]}

/*~~~~~~~~~~~~~~~~~~~~~~~~[Code in cal.php]~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// When everything (DOM, script, images. etc...) is loaded on cal.php, call iframeLoaded function that is on the parent's page.
window.onload = function() {  parent.iframeLoaded();}

#overlay {  background: rgba(0, 0, 0, .3);  width: 100%;  height: 100%;  position: absolute;  top: 0;  left: 0;  pointer-events: none;}#CalF {  position: absolute;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay"></div>
<iframe id="CalF" src="http://khchan.byethost18.com/cal.php" height="100%" width="100%" frameborder="0" style="top: 0;"></iframe>

iframe and object are both blank, but only in Firefox

I reproduced the issue on my server which serves 2 domains, and then fixed it this way:

X-Frame-Options: ALLOW-FROM https://SITE1.COM

I added https://, as seen in MDN page for X-Frame-Options

You can observe the difference here (only with Firefox of course, as with other browsers both frames are shown): I pushed a php page that inserts the header without or with https://, and created this fiddle that insert 2 iframes: Firefox shows first iframe as empty, and second one with content (which echoes the value in header) on the right.

screenshot of firefox

Since you are forced to put a "serialized origin" (protocol+FQDN), I wondered if you can put multiple entries, or wildcards. My understanding of RFC 7034 says you cannot.

Now about this detail:

The most interesting thing is that if I open the developer console and
reload the page, I see the requests to fetch site1.com and its CSS and
so on, but there are no requests made for site2.com. It isn't that
there is a problem showing site2.com, it is never requested at all.

That's because it was cached. I also saw that, but a force-refresh rightly showed a new request was made.

Iframe not working in Firefox

After inspecting your html in firefox and chrome, it looks like there is a problem, not in your script but in the page you are opening in the iframe (but don't worry, I found a possible workaround).

First, this is the problem: Use Chrome's inspector and Firefox's firebug and you will see that the iframe is pointing to
http://www.weeronline.nl/Go/ExternalWidgetsNew/RainAnd2DaysCity?gid=4057473&temperatureScale=Celsius&defaultSettings=False, inside that webpage there is another iframe pointing to http://www.weeronline.nl/Go/ExternalWidgetsNew/RainWidgetContent?gid=4057473&sizeType=1 (both addresses are the same in both browsers).

Inside that inner iframe there is a div called radar-container, and its css has a .image-rotator-container selector that has set display:none;. In google chrome the div contains an inline style of display:block (and a background-image). But in firefox the div it doesn't have the display:block (only the background image). So, the problem is that teir scripts are not "showing" the map's div.

The good news: it looks like if you reload the iframe "manually" (I did it by adding a fake parameter to the url using firebug: http://www.weeronline.nl/Go/ExternalWidgetsNew/RainWidgetContent?gid=4057473&sizeType=1&foo) you can see the map. So, you can let the url of the iframe empty when the page loads, and then (on $(document).ready()) you set the url.

Side note: your webpage can't find a http://inpages.nl/jquery.nicescroll.min.js and a lot of images from your site. That is not related to your question but you should take a look.

Firefox not able to find iframe

The window.frames[] array is indexed by the [i]frame's name attribute (aka frame target). id can't be relied upon to also work — although it may in IE <8, which often thinks names and ids are the same thing.

If you want to access a frame's content via ID, use the DOM Level 2 HTML contentDocument property instead of the old-school (“DOM Level 0”) frames array:

document.getElementById('additionalTxt_f').contentDocument.body.innerHTML

...but then, for compatibility with IE <8, you also have to add some fallback cruft, since it doesn't support contentDocument:

var f= document.getElementById('additionalTxt_f');
var d= f.contentDocument? f.contentDocument : f.contentWindow.document;
d.body.innerHTML

So it's up to you which method you think is less ugly: the extra script work, or just using the name attribute.