Search code examples
javascriptfirefoxinnerhtml

Mozilla Firefox innerhtml not working

I am facing a problem with firefox and innerhtml. I can't figure out why it is not working :/ Chrome, Opera, IE, Safari works fine but Firefox ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
    <title>Dokument bez názvu</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/styl.css">
    <script type='text/javascript' src='js/jquery-1.9.1.js'></script>
    <style>
        #displaybox
        {
            z-index: 10000;
            filter: alpha(opacity=100); /*older IE*/
            filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); /* IE */
            -moz-opacity: 1; /*older Mozilla*/
            -khtml-opacity: 1; /*older Safari*/
            opacity: 1; /*supported by current Mozilla, Safari, and Opera*/
            position: fixed;
            top: 20px;
            left: 0px;
            width: 100%;
            height: 100%;
            color: #FFFFFF;
            text-align: center;
            vertical-align: middle;
        }
        body
        {
            font-family: Calibri;
        }
        .black_overlay
        {
            visibility: hidden;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 1001;
            -moz-opacity: 0.7;
            opacity: .70;
            filter: alpha(opacity=70);
        }
    </style>
    <script>
        function clicker() {
            var thediv = document.getElementById('displaybox');
            if (thediv.style.display == "none") {
                thediv.style.display = "";
                thediv.innerHTML = "<embed src='prohlidka.html' height='638' width='1024' ></embed>";
                var thelay = document.getElementById('fade');
                thelay.style.visibility = "visible";
            } else {
                thediv.style.display = "none";
                thediv.innerHTML = '';
                var thelay = document.getElementById('fade');
                thelay.style.visibility = "hidden";
            }
            return false;
        }

    </script>
</head>
<body>
    <div id="fade" class="black_overlay">
    </div>
    <div id="displaybox" style="display: none; overflow: visible">
    </div>
    <a id="otevrit" href='#' onclick='return clicker();'>Virtuální mapa</a>
</body>

That's my code, a little bit of css, one function and the body. As I said, other browsers work fine. They normally show innerhtml exactly how I need. But Firefox does not, the black overlay works fine. There's no error, no message when I checked javascript.

Solution

  • Your code is working properly in mozilla firefox.

    I used it in this fiddle : WORKING FIDDLE and just added this line of code : console.log($('#displaybox').html()); and i am getting the answer as : <embed src="https://www.google.com/" height="638" width="1024">, which is correct as I had provided the same input.

    When i looked at the id displaybox in firebug, i was able to see the embed code being embedded in that ID.

    So there is no problem with the code technically, how ever if you had wanted to open up the page then, your logic is wrong. You have to use iframe src instead of embed to open up a page.