Mozilla Firefox innerhtml 不工作答案

【问题标题】：Mozilla Firefox innerhtml not workingMozilla Firefox innerhtml 不工作
【发布时间】：2014-02-11 08:07:49
【问题描述】：

我遇到了 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 时没有消息。

【问题讨论】：

标签： javascript firefox innerhtml

【解决方案1】：

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

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

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

所以代码在技术上没有问题，但是如果你想打开页面，你的logic 是wrong。您必须使用iframe src 而不是embed 来打开页面。

【讨论】：

我用 iframe 替换了 embed，它工作正常 :D 非常感谢。它也解决了我的其他问题^^
@user3197269 ：很高兴能帮上忙 :)

【解决方案2】：

问题不是innerhtml，而是<embed> 标签。它不是用来打开网页的，而是用来打开视频的。您应该尝试使用 <iframe> 之类的东西。

【讨论】：

【解决方案3】：

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

【讨论】：