.InnerHTML 在 Internet Explorer 中无法正常工作

Posted

技术标签:

【中文标题】.InnerHTML 在 Internet Explorer 中无法正常工作【英文标题】:.InnerHTML Not working properly in Internet Explorer 【发布时间】:2011-07-11 18:06:03 【问题描述】:

我想为 html 控件的 innerHTML 分配一个链接标记。但这在 Internet Explorer 中无法正常工作。但是,当我尝试分配除 <link><style> 之外的任何标签时,它工作正常。

<html>
<head>
<script type="text/javascript">
function getValue()
  
  var x=document.getElementById("myHeader");
  x.innerHTML='<link \"http://test.com/css/template.css\" rel=\"stylesheet\"><div>abc</div>';
  alert(x.innerHTML);
  
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">Click me!</h1>

</body>
</html>

另外,如果我更改上面&lt;div&gt; 标记和&lt;link&gt; 标记的顺序,它在Internet Explorer 中也可以正常工作。

x.innerHTML='<div>abc</div><link \"http://test.com/css/template.css\" rel=\"stylesheet\">';

请推荐!谢谢。

编辑: 这是带有 ExtJs 的 Internet Explorer 中的一个错误。更多信息在

http://www.sencha.com/forum/showthread.php?30110-internet-explorer-autoLoad-css-not-applied

【问题讨论】:

你真正想要完成什么?给出准确完成的 html 示例,当一切都成功完成后,它应该是什么样子。您试图将 插入到 html 文档的正文中是为了什么目的?你想要内联 css,还是内联 【参考方案1】:

innerHTML 在 IE 中不起作用,但使用 DOM 方法可以:

function getValue()

  var x=document.getElementById("myHeader")
    , link = document.createElement('link')
    , div = document.createElement('div');
  x.innerHTML = '';
  x.appendChild(link);
  x.appendChild(div);
  div.innerHTML = 'abc';
  link.href = 'http://test.com/css/template.css';
  link.rel = 'stylesheet';
  alert(x.innerHTML);

虽然reference 声明link 标记可能只出现在标题中,但有趣的是,如果您使用我提供的代码,样式链接确实 工作,在我尝试过的所有浏览器中(IE ,火狐,铬)。请参阅this jsfiddle(我使用了来自 test.com 的真实 css-href ;-)

但是,如果您想将 link 放在正确的部分 (&lt;head&gt;),请使用:

var header = document.getElementsByTagName('head')[0];
  , link = document.createElement('link');
header.appendChild(link);
link.href = 'http://test.com/css/template.css';
link.rel = 'stylesheet';

【讨论】:

【参考方案2】:

对于初学者,您的&lt;link&gt; 缺少 href 属性。

<link href=\"http://test.com/css/template.css\" rel=\"stylesheet\" />

并且不要将链接和样式标签放入&lt;body&gt;。将它们注入&lt;head&gt;

  var link = document.createElement("link");
  link.href = "http://test.com/css/template.css";
  link.rel = "StyleSheet";
  document.head.appendChild(link);

【讨论】:

糟糕!抱歉..缺少 href 是一个错字..实际上我得到了一个 HTML 作为字符串,其中包含链接和其他 HTML。仅为 IE 注入链接会增加开销。 话虽如此,创建一个屏幕外 div 元素并在其上设置 .innerHTML 属性。然后 setTimeout(callback,1) 让元素得到实现。在回调函数中,提取 div 的所有子项。在 document.head 或正文中的

标记内重新设置元素。酌情使用 removeChild 和 appendChild 方法。

【参考方案3】:

很多人都忽略了这一点。他正在尝试做的事情(在修复缺少 href 属性的错字之后)在任何其他浏览器中都可以工作。

IE 8 及以下版本有一个错误,如果在设置 innerHTML 时文本中的第一个元素是一个标签(可能是其他标签),它会被忽略。如果你只是先放一个空格或换行符或其他标签,它就可以工作。

当他说先将&lt;div&gt; 修复它时,他甚至发现了这一点。

这是无效的,但这就是你修复它的方法。

编辑:换句话说:foo.innerHTML = "\n" + yourHtmlWithLinkInIt;

【讨论】:

【参考方案4】:

&lt;link&gt;只能包含在&lt;head&gt;中。

这个元素定义了一个链接。与 A 不同, 它可能只出现在 HEAD 部分 一个文件,虽然它可能会出现 任意次数。

参考:http://www.w3.org/TR/html401/struct/links.html#edef-LINK

【讨论】:

&lt;link&gt; 不是超链接。 不开玩笑?您从我的回答中不明白什么?先生,你好;) 关于样式表的问题,您建议使用 。谁在开玩笑?【参考方案5】:

我认为问题在于&lt;link&gt; 必须是一个空元素。将您的代码更改为:

x.innerHTML='<link \"http://test.com/css/template.css\" rel=\"stylesheet\" /><div>abc</div>';
                                                     // this is the trick ^^^

编辑:我没有测试过这个,但这是第一个伤害我眼睛的东西。

EDIT2: &lt;link&gt; 标签只能出现在 &lt;head&gt;-section 内...我希望你知道你在做什么。

【讨论】:

关闭样式标签没有帮助:( 尾随/“自闭”斜线仅对XHTML语法是必需的,在使用innerHTML时绝对不相关;在 HTML 语法中,它既没有必要也不可取。【参考方案6】:

正确设置文本,我建议您按照我通常做的事情去做。如果你有 ie 8 然后在 ie 中打开 html。按 f12 显示开发者工具。现在在新窗口中转到脚本标签。从您的 javascript 开始的位置设置断点。现在按下按钮开始调试。通过某些事件或其执行方式从您的 js 函数中执行。现在在 javascripg 函数中的对象上,当断点命中时,右键单击并添加监视。展开对象并查看您之前的文本在哪里以及您的新文本在哪里。

【讨论】:

【参考方案7】:

作为您的最终目标,您到底想实现什么?如前所述,链接标签实际上应该只出现在 html 文档的&lt;head&gt; 中。

JavaScript 在它的香草风味中可能是一件棘手的事情,你最好使用一个框架,我个人最喜欢的是 MooTools 虽然我听说 JQuery 相当不错,但 MooTools 有 OOP(对于真正的程序员 - tehe)。

这将使您做更多事情,并可能达到您的最终目标,如果您让我/我们知道,那么您应该得到更直接的答案来解决您的问题。

【讨论】:

【参考方案8】:

问题是它适用于 FireFox 和 Google Chrome,但不适用于 IE。

这是因为不能用字符串设置InternetExplorer的innerHTML标签,如果字符串多于文本,即HTML元素。

我在尝试使用 AJAX 将 ComboBox 动态填充到表格单元格中时遇到过这种情况...

解决方案是使用 JQuery。 然后你可以这样做:$("#YourElementID").html('&lt;link \"http://test.com/css/template.css\" rel=\"stylesheet\" /&gt; &lt;div&gt;abc&lt;/div&gt;'); JQuery 将为您完成 selbie 和 KooiInc 所描述的 DOM 工作。

【讨论】:

【参考方案9】:

在此处为“link”和“sytle”找到了不同且简单的解决方案,但需要使用 appendChild 添加“script”。和 Vectorjohn 说的很像,也提供了更多的参考。

http://allofetechnical.wordpress.com/2010/05/21/ies-innerhtml-method-with-script-and-style-tags/

【讨论】:

【参考方案10】:

试试

document.getElementById('tblList').outerHTML="ypur html";

【讨论】:

以上是关于.InnerHTML 在 Internet Explorer 中无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章

innerHTML 删除 Internet Explorer 中的属性引号

Internet Explorer 中带有 innerHTML 的 JavaScript iframe 设置

安装了IIS后,输入http://localhost和127.0.0.1怎么都打不开,显示HTTP 500 - 内部服务器错误 Internet Exp

从 Internet Explorer 中的 AJAX 响应中删除 SCRIPT 标记

EXP6 信息搜集与漏洞扫描

20155211 Exp6 信息搜集与漏洞扫描