.innerHTML 歌剧问题？答案

【问题标题】：.innerHTML opera issue?.innerHTML 歌剧问题？
【发布时间】：2009-06-03 16:17:52
【问题描述】：

我正在努力：

document.getElementById("header-text").innerHTML = "something interesting";

除了 Opera 之外的所有浏览器都可以正常工作（我正在运行最新版本）。

浏览互联网时，我发现有人说 Opera 不支持 innerHTML。这听起来不对。

任何指针？

谢谢

编辑：这是我要获取的 id

<div id="header-text" class="picture-text">
          <!--[if gt IE 5]>ugly hack<![endif]-->
          Some text generated server side
         <!--[if gt IE 5]>ugly hack<![endif]-->
</div>

Edit2：我有同样的问题：

<div id="header-text" class="picture-text">
          Static text
</div>

编辑3：

<body onload="intialize();">


function intialize() {
    operaHeaderFix();
}


function operaHeaderFix(){
    if(window.opera) {
        /*opera specific action*/ 
        document.getElementById("picture-line-wrapper").style.position="relative";
        document.getElementById("picture-line-wrapper").style.top="0px";
        document.getElementById("picture-line-wrapper").style.marginTop="-230px";
        document.getElementById("picture-line").style.padding="1px";
        document.getElementById("header-text").innerHTML = "<div style='margin:220px 0px 0px 20px;'>"+document.getElementById("header-text").innerHTML+"TEST</div>";
    }
}

Edit4：如果我删除 if(window.opera)，它将在 FF 和 IE 中正常运行

【问题讨论】：

你有什么确切版本的 Opera？
我在 Windows XP 上运行 9.64
我刚刚更新到 9.64（在 XP 上）并运行了你的静态 div/JS 测试......它运行良好。一定有其他事情发生。
发生了一些真正的问题，因为以上所有内容都对我有用...（编辑 1-4）
这在 Opera 中也适用于我。在这一点上，我只能建议卸载并重新安装 Opera，然后看看它是否有效。

标签： javascript cross-browser opera

【解决方案1】：

发现问题：

包装节点未正确关闭。

<div att1="value" att2="value"
  <div id="header-text">...</div>
</div>

AFAIK、FF 和 IE 礼貌地修复了标签……但 Opera 没有，因此子 DIV 并不是 DOM 中的真正元素。

应该可以正常工作。 id 为“header-text”的元素是什么？您确定只有一个匹配项，并且具有可编辑的内容吗？

您能否发布一些标记以便我们进行测试？

在 PPK 的网站上，似乎没有任何 Opera 问题： http://www.quirksmode.org/dom/innerhtml.html

更新：在 XP 上的 Opera 9.6.4 中运行此代码对我来说效果很好。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>innerHTML test</title>
<script>
  function doIt(){
    document.getElementById("header-text").innerHTML = "something interesting";
  }
</script>
</head>
<body>
  <div id="header-text" class="picture-text">
    Static text
  </div>
  <input type="button" value="Change It" onclick="doIt();"/><br/>
</body>
</html>

【讨论】：

这是唯一的匹配。它认为有条件 cmets (

【解决方案2】：

我遇到了一个有点相关的问题，发现它与 HTML 编码值有关。例如，当 innerHTML 包含“ ”时而不是空格，innerHTML 会返回略有不同（我通过测试 innerHTML 的长度确认了这一点）。

这是我在尝试获取包含单个 DIV 的标签的 innerHTML 时发现的，该 DIV 包装了编码的不间断空格 (

)：

<div> </div>

上面的例子展示了 Opera 10.26 如何返回 innerHTML，当我检查长度时它会在 Opera 中返回 12

<div>&nbsp;</div>

这就是我使用的所有其他浏览器返回 innerHTML（IE6/7/8、Firefox 3.x、Chrome 等）的方式，当我检查长度时，它会在所有其他浏览器中返回 17。

【讨论】：

（这是 Opera 中的一个已知错误，应该在 Opera 11 或稍后修复）

【解决方案3】：

编辑：你是如何调用这个函数的？你是在文档<head>中调用它，在<body>的末尾，你是在使用window.onload吗？

innerHTML 不是 w3c-valid 属性（它将在 HTML 5 中）。它是由 Microsoft 创建的，出于兼容性原因，大多数其他浏览器仅支持它。

也就是说，我相信 Opera 确实支持innerHTML，但是一些谷歌搜索表明它支持is broken in certain versions。尝试更新您的 Opera 版本，看看它是否有效。

【讨论】：

就像我说的，我使用的是最新版本的 Opera
（我在谷歌搜索和更新时看到了这个论坛帖子^^虽然没有解决任何问题）