Javascript 子窗口项目-将DIV元素移动到父窗口的底部（作为最后一个子窗口）_Javascript_Html_Iframe

Javascript 子窗口项目-将DIV元素移动到父窗口的底部（作为最后一个子窗口）

javascript html iframe

Javascript 子窗口项目-将DIV元素移动到父窗口的底部（作为最后一个子窗口）,javascript,html,iframe,Javascript,Html,Iframe,我正在尝试将div作为子窗口。它们将有一个标题、图标、最小化、最大化关闭按钮和一个空的iframe作为容器。此子窗口可移动且可调整大小。问题是，当我编写一个iframe时，我将这个div移动到父对象的底部（作为最后一个子对象），iframe的一些内容变为空/消失。当我尝试使用自定义mybrowser（xulrunner示例浏览器）在xulrunner上运行脚本时，每次写入iframe时，地址栏都会更改我之所以这样做（将div移到底部）是因为这是一种简单的方法，可以使我的子窗口和每个子窗口都成为

我正在尝试将div作为子窗口。它们将有一个标题、图标、最小化、最大化关闭按钮和一个空的iframe作为容器。此子窗口可移动且可调整大小。问题是，当我编写一个iframe时，我将这个div移动到父对象的底部（作为最后一个子对象），iframe的一些内容变为空/消失。当我尝试使用自定义mybrowser（xulrunner示例浏览器）在xulrunner上运行脚本时，每次写入iframe时，地址栏都会更改

我之所以这样做（将div移到底部）是因为这是一种简单的方法，可以使我的子窗口和每个子窗口都成为最上面的z顺序

这是密码

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Window Manager</title>
</head>
<body>
<div style="position:absolute; top:10px; left:10px; height:300px; width:450px; border:1px solid black; padding:3px;">
  <div class="caption" style="position:relative; top:0px; left:0px; right:0px; margin:0px; padding:10px; color:#ededed; background-color:#555555;">
    <p style="display:inline;">Window1</p>
  </div>
  <div class="toolbars" style="position:relative; top:0px; left:0px; right:0px; margin:2px 0px 0px 0px; padding:2px 5px 2px 5px; background-color:#999999;">
    <button onclick="preview()">preview</button> <button onclick="template()">template</button> <button onclick="moz1()">mdn-samples.mozilla.org</button>
  </div>
  <div class="client" style="position:absolute; top:80px; left:3px; bottom:5px; right:5px; margin:0px; padding:0px;">
    <textarea id="editor1" style="position:relative; height:100%; width:100%;  margin:0px 3px 3px 0px; padding:0px; border:1px solid black; resize:none; overflow:scroll;"></textarea>
  </div>
</div>

<div style="position:absolute; top:10px; left:500px; height:200px; width:300px; border:1px solid black; padding:3px;">
  <div class="caption" style="position:relative; top:0px; left:0px; right:0px; margin:0px; padding:10px; color:#ededed; background-color:#555555;">
    <p style="display:inline;">Window2</p>
  </div>
  <div class="client" style="position:absolute; top:45px; left:3px; bottom:5px; right:5px; margin:0px; padding:0px;">
    <iframe id="frame1" style="position:relative; height:100%; width:100%; border:1px solid black;"></iframe>
  </div>
</div>

<script>

function preview(){
  var f1 = document.getElementById('frame1');
  var f2 = f1.contentDocument ||  f1.contentWindow.document;
  f2.open();
  f2.write(document.getElementById('editor1').value);
  f2.close();
}

function template(){
  var s = '<!DOCTYPE html><html lang="en-US"><head><meta charset="UTF-8" />';
  s += '<title>hello1</title></head><body>';
  s += '<p>aa aa aa</p><p>bb bb bb</p><p>cc cc cc</p><p>dd dd dd</p>';
  s += '<p>ee ee ee</p><p>ff ff ff</p><p>gg gg gg</p><p>hh hh hh</p>';
  s += '</body></html>';
  document.getElementById('editor1').value = s;
}

function moz1(){
  document.getElementById('frame1').src = 'https://mdn-samples.mozilla.org/';
}

var _move1 = {el:null, x:0, y:0};

function _move_init(){
  document.addEventListener('mousedown', _move_start);  
}

function _move_start(event){
  var el = event.target || event.srcElement;
  if (el.classList.contains('caption')){
    el = el.parentElement;
    _move1.el = el;
    _move1.x = (document.all ? window.event.clientX : event.pageX) - el.offsetLeft;
    _move1.y = (document.all ? window.event.clientY : event.pageY) - el.offsetTop;
    document.addEventListener('mousemove', _move_elem);
    document.addEventListener('mouseup', _move_end);
    //problem is here
    //this line (parentElement.appendChild) make a window become top window, but will reset iframe
    el.parentElement.appendChild(el);
  }
}

function _move_elem(event) {
  if (_move1.el !== null){
    _move1.el.style.left = ((pos_x = document.all ? window.event.clientX : event.pageX) - _move1.x) + 'px';
    _move1.el.style.top = ((document.all ? window.event.clientY : event.pageY) - _move1.y) + 'px';
  }
}

function _move_end(){
  _move1.el = null;
  document.removeEventListener('mousemove', _move_elem);
  document.removeEventListener('mouseup', _move_end);
}

_move_init();

</script>

</body>
</html>


窗口管理器
Window1
预览模板mdn-samples.mozilla.org
Window2
函数预览（）{
var f1=document.getElementById（'frame1'）；
变量f2=f1.contentDocument | | f1.contentWindow.document；
f2.open（）；
f2.写入（document.getElementById（'editor1'）.value）；
f2.关闭（）；
}
函数模板（）{
var s=''；
s+=‘你好’；
s+='aa-aa-aa
bb-bb-bb
cc-cc-cc
dd-dd-dd；
s+='ee-ee-ee
ff-ff-ff
gg-gg-gg
hh-hh-hh；
s+=''；
document.getElementById（'editor1'）。value=s；
}
函数moz1（）{
document.getElementById（'frame1'）.src='1'https://mdn-samples.mozilla.org/';
}
var_move1={el:null，x:0，y:0}；
函数_move_init（）{
document.addEventListener（'mousedown'，'u move'u start）；
}
功能_移动_启动（事件）{
var el=event.target | | event.src元素；
if（el.classList.contains（'caption'））{
el=el.parentElement；
_move1.el=el；
_move1.x=（document.all？window.event.clientX:event.pageX）-el.offsetLeft；
_move1.y=（document.all？window.event.clientY:event.pageY）-el.offsetTop；
document.addEventListener（'mousemove'，'u move'u elem）；
文件。添加的文件列表器（'mouseup'，\u move\u end）；
//问题就在这里
//此行（parentElement.appendChild）使窗口成为顶部窗口，但将重置iframe
el.parentElement.appendChild（el）；
}
}
功能移动元素（事件）{
如果（_move1.el！==null）{
_move1.el.style.left=（pos_x=document.all？window.event.clientX:event.pageX）——move1.x）+“px”；
_move1.el.style.top=（document.all？window.event.clientY:event.pageY）-（u move1.y）+“px”；
}
}
函数_move_end（）{
_move1.el=null；
document.removeEventListener（'mousemove'，'u move'u elem）；
文档。删除EventListener（'mouseup'，'u move'u end）；
}
_move_init（）；

尝试单击模板，然后单击预览，然后移动window2，iframe将重置或者尝试单击mdn-samples.mozilla.org，然后在window2上滚动iframe，然后移动window2，iframe将像从未滚动一样重置

（parentElement.appendChild）使窗口成为顶部窗口的方法

使用z顺序方法更改窗口顶部顺序时，问题是该窗口的每个子窗口必须是z顺序最顶部的，否则它们将重叠。

请在问题中添加注释，然后删除注释。请在问题中添加注释，然后删除注释。