Question

对于含糊不清的标题感到抱歉，不知道该怎么说。

我有一个html页面，其中有2个iframe并排，高度为100％。我正试图在右边设置iframe的最大宽度。

<!DOCTYPE html>
    <html>    
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title></title>
    </head>

    <body>
      <div id="content-wrapper">
        <div id="content">
          <div id="holder_Iframe1">
            <iframe id="iframe1" src="https://en.wikipedia.org/wiki/Mercedes-Benz"></iframe>
            <div id="drag"></div>
          </div>
          <div id="holder_Iframe2">
            <iframe id="iframe2" src="http://www.dictionary.com/browse/mercedes?s=t"></iframe>
          </div>
        </div>
      </div>
    </body>    
    </html>

两个iframe都被div包裹。将鼠标悬停在iframe之间以查看重新调整大小的光标。

我正在设置560px的iframe2（右边的那个）的最大宽度，但是在调整大小时，有时它会超过最大宽度，所以我无法将其调整大小。我正在努力解决这个问题。

function Resize(e) {

      var rightPanePx = document.documentElement.clientWidth - parseInt(holder_Iframe1.style.width, 10);
      console.log(rightPanePx);
      if ((rightPanePx >= 25) && (rightPanePx <= 560)) {

        holder_Iframe1.style.width = (e.clientX - holder_Iframe1.offsetLeft) + "px";
        iframe1.style.width = Math.max((holder_Iframe1.style.width.replace("px", "") - 4), 0) + "px";

        holder_Iframe2.style.width = (document.documentElement.clientWidth - holder_Iframe1.style.width.replace("px", "")) + "px";
        iframe2.style.width = holder_Iframe2.style.width;

      }
    }

我附上了证明我问题的代码。

var iframe1 = document.getElementById("iframe1");
var iframe2 = document.getElementById("iframe2");
var holder_Iframe1 = document.getElementById("holder_Iframe1");
var holder_Iframe2 = document.getElementById("holder_Iframe2");
var dragEl = document.getElementById("drag");

holder_Iframe1.style.width = (Math.max(document.documentElement.clientWidth, window.innerWidth || 0) * 0.8) + "px";
iframe1.style.cssText = 'width:' + ((Math.max(document.documentElement.clientWidth, window.innerWidth || 0) * 0.8) - 5) + 'px;height:100%;';

dragEl.addEventListener('mousedown', function(e) {
  //create overlay so we will always get event notification even though the pointer is hovering iframes
  var overlay = document.createElement('div');
  overlay.id = "overlay";
  document.body.insertBefore(overlay, document.body.firstChild);

  window.addEventListener('mousemove', Resize, false);
  window.addEventListener('mouseup', stopResize, false);
}, false);

function Resize(e) {

  var rightPanePx = document.documentElement.clientWidth - parseInt(holder_Iframe1.style.width, 10);
  console.log(rightPanePx);
  if ((rightPanePx >= 25) && (rightPanePx <= 560)) {

    holder_Iframe1.style.width = (e.clientX - holder_Iframe1.offsetLeft) + "px";
    iframe1.style.width = Math.max((holder_Iframe1.style.width.replace("px", "") - 4), 0) + "px";

    holder_Iframe2.style.width = (document.documentElement.clientWidth - holder_Iframe1.style.width.replace("px", "")) + "px";
    iframe2.style.width = holder_Iframe2.style.width;

  }
}

function stopResize(e) {
  //remove event listeners from improved performance
  window.removeEventListener('mousemove', Resize, false);
  window.removeEventListener('mouseup', stopResize, false);

  //remove fake overlay
  document.getElementById("overlay").remove();
}

html {
  overflow-y: hidden;
}
body {
  width: 100%;
}
iframe,
#holder_Iframe1,
#holder_Iframe2 {
  margin: 0;
  padding: 0;
  border: 0;
}
iframe {
  width: 100%;
  height: 100%;
  min-width: 0;
}
#content-wrapper {
  display: table;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
}
#content {
  display: table-row;
}
#holder_Iframe1,
#holder_Iframe2 {
  display: table-cell;
  min-width: 0 !important;
}
#holder_Iframe1 {
  width: 80%;
}
#drag {
  height: 100%;
  width: 3px;
  cursor: col-resize;
  background-color: rgb(255, 0, 0);
  float: right;
}
#drag:hover {
  background-color: rgb(0, 255, 0);
}
#drag:active {
  background-color: rgb(0, 0, 255);
}
#overlay {
  background-color: rgba(0, 0, 0, 0);
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  position: fixed;
  cursor: col-resize;
}

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title></title>
</head>

<body>
  <div id="content-wrapper">
    <div id="content">
      <div id="holder_Iframe1">
        <iframe id="iframe1" src="https://en.wikipedia.org/wiki/Mercedes-Benz"></iframe>
        <div id="drag"></div>
      </div>
      <div id="holder_Iframe2">
        <iframe id="iframe2" src="http://www.dictionary.com/browse/mercedes?s=t"></iframe>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

您需要使用光标位置来检测方向。

将e.pageX添加到您的函数中以确定是否调整其大小。

在您的示例中，这可能是(window_size - e.pageX < 560)调整大小，否则请不要调整大小。

在重新调整大小

1 个答案: