javascript - IE 问题和追加到 window.opener

Question

我有以下脚本在 Firefox 和 Chrome 中运行良好(不确定其他浏览器)，但它在 IE 中根本不起作用。它基本上打开一个弹出窗口，其中附加一个 div 以突出显示窗口开启器中的项目。我希望它在同一站点的多个页面上工作，所以我不想添加一个函数来在主窗口 (window.opener) 中创建 div。抱歉，我无法发布工作演示 - window.opener 在 bin 中不起作用。

<button>Open popup</button>
<script type="text/javascript">
$(document).ready(function(){
 $(':button').click(function(){
  var highlight = "" +
   "<button>Click to Add Highlight</button>" +
   "<scr"+"ipt type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js'></scr"+"ipt>" +
   " <scr"+"ipt type='text/javascript'>" +
   " $(':button').click(function(){" +
   "  $('<div/>', {" +
   "   'class': 'highlight'," +
   "   css: {" +
   "    position:   'absolute'," +
   "    height:     '50px'," +
   "    width:      '50px'," +
   "    left:       '200px'," +
   "    top:        '200px'," +
   "    background: '#fff'," +
   "    opacity:    0.5," +
   "    zIndex:     99" +
   "   }" +
   "  }).appendTo( $(window.opener.document.body) );" +
   " })" +
   " </scr"+"ipt>";
  var w = window.open('','highlighter','toolbar=0,location=0,status=0,width=200,height=100,scrollbars=1,resizable=1');
  w.document.write(highlight);
  w.document.close();
 })
})
</script>

我也尝试过使用 appendChild 但没有成功。我最终发现这种方法可行，但这是一个糟糕的解决方案，会导致页面闪烁。

if ($.browser.msie){
 var d = '<div class="highlight" style="position:absolute;height:50px;' +
  'width:50px;left:200px;top:200px;background:#fff;opacity:0.5;' +
  'filter:alpha(opacity=50);zIndex:99;"></div>';
 window.opener.document.body.innerHTML = window.opener.document.body.innerHTML + d;
}

有人知道更好的解决方案吗？

Answer 1

我想我找到了问题所在。这可能是一个 jQuery 错误，但我不能说...我将发布另一个问题以获得帮助。

所以我通过附加一个字符串找到了解决这个问题的方法。出于某种原因，IE 中的 jQuery 不会附加对象。所以这有效:

if ($.browser.msie){
 var d = '<div class="highlight" style="position:absolute;height:50px;width:50px;left:200px;' + 
  'top:200px;background:#fff;opacity:0.5;filter:alpha(opacity=50);zIndex:99;"></div>';
 $(window.opener.document.body).append(d);
}

---

编辑: Pointy 在 another question 中解决了我的问题.事实证明这不是错误，但 IE 不允许您附加在窗口外创建的对象。他的解决方案如下:

window.opener.$('<div/>', {
 'class': 'highlight',
 css: {
  position:   'absolute',
  height:     '50px',
  width:      '50px',
  left:       '200px',
  top:        '200px',
  background: '#fff',
  opacity:    0.5,
  zIndex:     99
 }
}

但要确保 window.opener 使用的是 jQuery v1.4 或更高版本。