appendChild 在 IE 中无法正常工作

Question

我正在尝试创建一个简单的模态窗口，但 IE 不配合。当我在IE中调用此函数时，内容出现在页面底部的所有内容下，并且不出现覆盖图像。这是代码：

function applyOverlay(src)
{
  var my_overlay = document.createElement('div');

  my_overlay.setAttribute('id','myoverlay');
  var doc_height = document.body.scrollHeight;
  my_overlay.setAttribute('style','text-align:center; position:fixed; top:0px; left:0px; background-image:url("images/trbg.png"); width:100%; height:'+doc_height+'; z-index:999;');
  my_overlay.innerHTML="<iframe style='background:none;' frameborder=0 height='100%' width='80%' src='"+src+"'><iframe>";
  document.body.appendChild(my_overlay);
}

Answer 1

这是常见的 IE 问题。这很烦人，但可以控制。

如果在 body 关闭之前在 body 标记内执行 document.body.appendChild，则 IE6 将不会加载该页面。 7 和 8 会等待页面加载

那么，如何处理这个问题呢？

• 使用 body.onload 等待正文加载。
• 将元素附加到另一个元素而不是 body 标记。

我推荐第二种选择。将元素附加到另一个目标元素将保留预期行为，并且不会更改将元素添加到网站的方式。