javascript - 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 问题。这很烦人，但可以控制。

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

那么，如何解决这个问题呢？

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

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