如何在 javascript 中创建 DOM 窗口？

Question

我有一个聊天室应用程序。我正在使用以下代码进行私人聊天。我正在使用window.open 函数，但是大多数浏览器弹出窗口都被阻止了，所以我想使用 DOM WINDOWS 而不是 windows，谁能告诉我该怎么做

    <script language="javascript">
    <!--
    function popUp(URL) {
      var Win = window.open(URL, '<?php echo $got_request['id'];?>', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=650,height=530,left=212,top=134');
}

    popUp("../private.php?s=<?php echo $got_request['username'];?>&room=<?php echo $got_request['roomname'];?>");
// -->

 </script>

Answer 1

有一个名为 DOM Window 的 jQuery 插件可以帮助你实现你想要的。

实际上没有 DOM 窗口这样的东西，它纯粹是页面的一部分，其样式看起来像一个新窗口。不管怎样，这个插件可能就是你要找的。​​p>

http://swip.codylindley.com/DOMWindowDemo.html

根据您的要求，您可能希望将 DOM 窗口与（我敢说）iframe 一起使用。

Answer 2

我认为您的意思是“DOM 窗口”只是页面上的一个元素，通常是div。您可以通过多种方式将其放置在页面上您喜欢的任何位置，包括绝对定位。

(编辑：Blast，我错过了你的帖子中有一个jquery-ajax标签，这表明你正在使用jQuery。下面的内容可能要短得多。啊，嗯……）

有很多库可以为您制作这些轻量级窗口。通常的术语是“灯箱”或“对话框”。对于 jQuery（现在我已经看到了标签），您可能会查看 jQuery UI，它有这个和许多其他方便的东西。

下面是一个示例，说明如何做到这一点 (live copy)：

HTML：

<input type='button' id='btnPop1' value='Show Popup 1'>
<br><input type='button' id='btnPop2' value='Show Popup 2'>
<div id="pop1" style="display: none">
  <p>I'm the first pop-up. My content is already in the DOM,
  but hidden via a <code>display: none</code> style until
  I'm triggered.</p>
  <p>Click me to close</p>
</div>

CSS：

#pop1 {
  position: abolute;
  left: 50%;
  top: 50%;
  width: 20%;
  height: 20%;
  margin-left: 10%;
  margin-top: 10%;
  border: 1px solid #aaa;
  background-color: #eee;
}
#pop2 {
  position: abolute;
  left: 50%;
  top: 25%;
  width: 40%;
  height: 20%;
  margin-left: 20%;
  margin-top: 10%;
  border: 1px solid #aaa;
  background-color: #eee;
}

JavaScript：

window.onload = function() {

  document.getElementById('btnPop1').onclick = function() {
    // Show pop1 if not showing
    document.getElementById("pop1").style.display = "block";
  };
  document.getElementById('pop1').onclick = hideOnClick;

  document.getElementById('btnPop2').onclick = function() {
    // Create and show pop2
    var pop = document.createElement("div");
    pop.id = "pop2";
    pop.innerHTML =
      "<p>I'm the second pop-up. My content was added to " +
      "the page dynamically. Click me to close.</p>";
    pop.onclick = removeOnClick;
    document.body.appendChild(pop);
  };

  function hideOnClick(e) {
    e = e || window.event;
    this.style.display = "none";
    if (e.stopPropagation) {
      e.stopPropagation();
    }
  }

      function removeOnClick(e) {
    e = e || window.event;
    if (e.stopPropagation) {
      e.stopPropagation();
    }
    this.onclick = "";
    if (this.parentNode) {
      this.parentNode.removeChild(this);
    }
  }

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }

};

这并不意味着是全部，全部（完全），只是为您指明正确的方向。

一些参考资料：

• DOM2 Core（支持良好的跨浏览器） - 用于createElement、appendChild、parentNode、removeChild 我在上面使用过的东西
• DOM2 HTML - 关于 HTML 元素及其与 DOM 的关系的有用信息
• DOM3 Core - 较新的 DOM 规范，浏览器支持较少，但它们正在出现