appendChild 在 IE 中无法正常工作

2022-01-17 00:00:00 internet-explorer modal-dialog javascript appendchild

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

I am trying to create a simple Modal window, but IE isn't cooperating. When I call this function in IE, the content appears at the bottom of the page under all content and the overlay image does not appear. Here's the code:

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);
}

推荐答案

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

This is common IE issue. It is irritating, but managable.

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

If document.body.appendChild is executed within the body tag before the body is closed, IE6 will simply not load the page. 7 and 8 will wait until the page is loaded

那么，如何解决这个问题?

So, how to approach this issue?

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

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

I recommend the second option. Appending elements to another target element will preserve the intended behavior and not change the way you add your elements to the site.

相关文章