Question

我遇到了firefox和innerhtml的问题。我无法弄清楚它为什么不起作用：/ Chrome，Opera，IE，Safari工作正常，但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>

这是我的代码，一点点css，一个函数和正文。正如我所说，其他浏览器工作正常。他们通常会innerhtml显示我的需要。但Firefox没有，黑色叠加层工作得很好。我检查javascript时没有错误，没有消息。

Answer 1

我不是innerhtml问题，而是<embed>标记。这并不意味着打开网页，而是打开视频。您应该尝试使用类似<iframe>的内容。

Answer 2

您的代码在mozilla Firefox中正常运行。

我在这个小提琴中使用它： WORKING FIDDLE ，只是添加了这行代码： console.log($('#displaybox').html());我得到了答案： <embed src="https://www.google.com/" height="638" width="1024">，这是正确的，因为我提供了相同的输入。

当我查看firebug中的id displaybox时，我能够看到embed代码嵌入在该ID中。

因此技术上代码没有问题，如果你想打开页面，那么logic是wrong。您必须使用iframe src代替embed来打开页面。

Answer 3

我遇到了同样的问题。解决方案是您可以使用.value而不是.innerHTML从Div中获取值。这将最适用于您将使用的任何类型的浏览器。

Mozilla Firefox innerhtml无法正常工作

3 个答案: