如何在 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 窗口这样的东西，它纯粹是页面的一部分，其样式看起来像一个新窗口。无论如何，这个插件可能就是您正在寻找的。

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

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

Answer 2

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

（编辑：天哪，我错过了您的帖子上有一个 jquery-ajax 标记，这表明您正在使用 jQuery。下面的内容可能是啊，嗯……）

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

以下是如何执行此操作的示例（实时复制）：

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 关系的有用信息
• < a href="http://www.w3.org/TR/DOM-Level-3-Core/" rel="nofollow">DOM3 Core - 较新的 DOM 规范，浏览器支持较差，但它们来了