Question

我正在尝试将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>

尝试点击模板然后预览，然后移动window2，iframe将重置或者尝试点击mdn-samples.mozilla.org，然后在window2上滚动iframe，然后移动window2，iframe将重置为从不滚动。

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

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

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

0 个答案: