如何在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

A「DOM窗口」在這個意義上我認爲你的意思只是頁面上的一個元素，通常是div。您可以通過多種方式將其放置在您喜歡的頁面的任何位置，包括絕對定位。

（編輯：高爐，我錯過了你對你的帖子，這表明對我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規範，較少的瀏覽器支持，但他們來了

Answer 2

有一個叫做DOM Window的jQuery插件可以幫助你實現你想要的。

實際上，沒有像DOM窗口這樣的東西，它純粹是頁面樣式看起來像一個新窗口的一部分。無論如何，這個插件可能是你要找的。

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

考慮您的要求，很可能你會想使用DOM窗口用（恕我直言）iframe中。