user3197269 user3197269 - 4 years ago 199
Javascript Question

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.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download