.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>
另外,如果我更改上面<div>
标记和<link>
标记的顺序,它在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
放在正确的部分 (<head>
),请使用:
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】:对于初学者,您的<link>
缺少 href 属性。
<link href=\"http://test.com/css/template.css\" rel=\"stylesheet\" />
并且不要将链接和样式标签放入<body>
。将它们注入<head>
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 时文本中的第一个元素是一个标签(可能是其他标签),它会被忽略。如果你只是先放一个空格或换行符或其他标签,它就可以工作。
当他说先将<div>
修复它时,他甚至发现了这一点。
这是无效的,但这就是你修复它的方法。
编辑:换句话说:foo.innerHTML = "\n" + yourHtmlWithLinkInIt
;
【讨论】:
【参考方案4】:<link>
只能包含在<head>
中。
这个元素定义了一个链接。与 A 不同, 它可能只出现在 HEAD 部分 一个文件,虽然它可能会出现 任意次数。
参考:http://www.w3.org/TR/html401/struct/links.html#edef-LINK
【讨论】:
<link>
不是超链接。
不开玩笑?您从我的回答中不明白什么?先生,你好;)
关于样式表的问题,您建议使用 。谁在开玩笑?【参考方案5】:
我认为问题在于<link>
必须是一个空元素。将您的代码更改为:
x.innerHTML='<link \"http://test.com/css/template.css\" rel=\"stylesheet\" /><div>abc</div>';
// this is the trick ^^^
编辑:我没有测试过这个,但这是第一个伤害我眼睛的东西。
EDIT2: <link>
标签只能出现在 <head>
-section 内...我希望你知道你在做什么。
【讨论】:
关闭样式标签没有帮助:( 尾随/“自闭”斜线仅对XHTML语法是必需的,在使用innerHTML时绝对不相关;在 HTML 语法中,它既没有必要也不可取。【参考方案6】:正确设置文本,我建议您按照我通常做的事情去做。如果你有 ie 8 然后在 ie 中打开 html。按 f12 显示开发者工具。现在在新窗口中转到脚本标签。从您的 javascript 开始的位置设置断点。现在按下按钮开始调试。通过某些事件或其执行方式从您的 js 函数中执行。现在在 javascripg 函数中的对象上,当断点命中时,右键单击并添加监视。展开对象并查看您之前的文本在哪里以及您的新文本在哪里。
【讨论】:
【参考方案7】:作为您的最终目标,您到底想实现什么?如前所述,链接标签实际上应该只出现在 html 文档的<head>
中。
JavaScript 在它的香草风味中可能是一件棘手的事情,你最好使用一个框架,我个人最喜欢的是 MooTools 虽然我听说 JQuery 相当不错,但 MooTools 有 OOP(对于真正的程序员 - tehe)。
这将使您做更多事情,并可能达到您的最终目标,如果您让我/我们知道,那么您应该得到更直接的答案来解决您的问题。
【讨论】:
【参考方案8】:问题是它适用于 FireFox 和 Google Chrome,但不适用于 IE。
这是因为不能用字符串设置InternetExplorer的innerHTML标签,如果字符串多于文本,即HTML元素。
我在尝试使用 AJAX 将 ComboBox 动态填充到表格单元格中时遇到过这种情况...
解决方案是使用 JQuery。
然后你可以这样做:$("#YourElementID").html('<link \"http://test.com/css/template.css\" rel=\"stylesheet\" /> <div>abc</div>');
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