javascript - 通过隐藏/显示重新定位 iframe

标签 javascript html css iframe css-position

我有当前代码，它通过页面顶部的按钮隐藏/显示 iframe(外部页面通过 cgi 呈现文本列 - 从左到右显示)。现在 iframe 使用绝对定位，但我希望它们“重新排序”并根据隐藏与显示更改位置。 例如:如果只显示 2 个 iframe，它们会减少左右占用的空间。 这很重要，因为我一次要添加的内容超出页面所能容纳的范围。 (此外，我正在尝试更改 Jscript 以默认隐藏所有内容，而不是在页面加载时显示)

    function myFunctionui() {

      var x = document.getElementById('ui');

      if (x.style.display === 'none') {
        x.style.display = 'block';
      } else {
        x.style.display = 'none';
      }
    }

    function myFunctiontic() {
      var x = document.getElementById('tic');
      if (x.style.display === 'none') {
        x.style.display = 'block';
      } else {
        x.style.display = 'none';
      }
    }

    function myFunctionlab() {
      var x = document.getElementById('lab');
      if (x.style.display === 'none') {
        x.style.display = 'block';
      } else {
        x.style.display = 'none';
      }
    }

    function myFunctionzone1_4() {
      var x = document.getElementById('zone1_4');
      if (x.style.display === 'none') {
        x.style.display = 'block';
      } else {
        x.style.display = 'none';
      }
    }

    function myFunctionzone5() {
      var x = document.getElementById('zone5');
      if (x.style.display === 'none') {
        x.style.display = 'block';
      } else {
        x.style.display = 'none';
      }
    }

    function myFunctionslas() {
      var x = document.getElementById('slas');
      if (x.style.display === 'none') {
        x.style.display = 'block';
      } else {
        x.style.display = 'none';
      }
    }

    function myFunctionhiks() {
      var x = document.getElementById('hiks');
      if (x.style.display === 'none') {
        x.style.display = 'block';
      } else {
        x.style.display = 'none';
      }
    }
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
#tic {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 60px;
}
#lab {
  position: absolute;
  left: 220;
  right: 0;
  bottom: 0;
  top: 60px;
}
#zone1_4 {
  position: absolute;
  left: 420;
  right: 0;
  bottom: 0;
  top: 60px;
}
#zone5 {
  position: absolute;
  left: 630;
  right: 0;
  bottom: 0;
  top: 60px;
}
#slas {
  position: absolute;
  left: 840;
  right: 0;
  bottom: 0;
  top: 60px;
}
#hiks {
  position: absolute;
  left: 1050;
  right: 0;
  bottom: 0;
  top: 60px;
}
iframe {
  overflow: scroll;
  height: 100%;
  seamless;
  border: 0;
}
<button onclick="myFunctionui()">^</button>

<div id="ui">
  <button onclick="myFunctiontic()">TICs</button>
  <button onclick="myFunctionlab()">LABs</button>
  <button onclick="myFunctionzone1_4()">ZONE 1-4</button>
  <button onclick="myFunctionzone5()">ZONE 5</button>
  <button onclick="myFunctionslas()">SLAS</button>
  <button onclick="myFunctionhiks()">HIKS</button>
</div>


<div id="tic">
  <iframe src="https://itcrops.itap.purdue.edu/opstools/ticstatus/ticstatus.cgi" width="130" frameborder="0"></iframe>
</div>
<div id="lab">
  <iframe src="https://itcrops.itap.purdue.edu/opstools/labstatus/labstatus.cgi" width="130" frameborder="0"></iframe>
</div>
<div id="zone1_4">
  <iframe src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/lastations1_4.cgi" width="250" frameborder="0"></iframe>
</div>
<div id="zone5">
  <iframe src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/lastations5.cgi" width="250" frameborder="0"></iframe>
</div>
<div id="slas">
  <iframe src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/slastations.cgi" width="250" frameborder="0"></iframe>
</div>
<div id="hiks">

  <iframe src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/hiksstations.cgi" width="250" frameborder="0"></iframe>

</div>

最佳答案

我想通了。

首先，去掉 position:absolute想法，因为有更简单的方法来解决这个问题。

此外，不要将 iframe 包装在 div 中秒。 Div 是 block 元素，这意味着它们会故意换行，但 iframe 是内联的，这意味着只有当行到达屏幕末尾时它们才会换行，正如您在这个答案中看到的那样。 (但是，如果您愿意，可以将所有 iframe 包装在 div 中。)

我建议你去掉 overflow: hidden用于 html 和正文，以便较小的屏幕可以看到您想要的内容。

您唯一需要的 CSS 是 iframe:white-space: nowrap这样线条就不会中断并且#iframeContainer {display: none}因为您希望默认情况下所有类似的东西都用于其子 iframe。

您的 JavaScript 中存在可以轻松修复的问题。正如我之前提到的，iframe 是内联的。但是，在您的功能中，如果在显示为“无”时单击按钮，它会说要使它们“阻止”。要解决此问题，只需将“ block ”更改为“内联”。 (注意: 我保留了“ui”“ block ”，因为您只想并排放置 iframe。)此外，要修复我遇到的错误，请根据显示创建 if 语句是“内联”而不是“无”。例如写if (x.style.display === 'inline') {x.style.display = 'none';} else {x.style.display = 'inline'};而不是 if (x.style.display === 'none') {x.style.display = 'inline';} else {x.style.display = 'none';} .另外，要修复加载时不显示的错误，只需添加 document.getElementById("iframeContainer").style.display = "block";到 if else 语句之外的每个函数。

查看代码片段可以清楚地理解我的意思。 (它有效!)

var frameContainer = document.getElementById("iframeContainer");
function myFunctionui() {

      var x = document.getElementById('ui');

      if (x.style.display === 'none') {
        x.style.display = 'block';
      } else {
        x.style.display = 'none';
      }
    }

    function myFunctiontic() {
      var x = document.getElementById('tic');
      if (x.style.display === 'inline') {
        x.style.display = 'none';
      } else {
        x.style.display = 'inline';
      }
      frameContainer.style.display = "block";
    }

    function myFunctionlab() {
      var x = document.getElementById('lab');
      if (x.style.display === 'inline') {
        x.style.display = 'none';
      } else {
        x.style.display = 'inline';
      }
      frameContainer.style.display = "block";
    }

    function myFunctionzone1_4() {
      var x = document.getElementById('zone1_4');
      if (x.style.display === 'inline') {
        x.style.display = 'none';
      } else {
        x.style.display = 'inline';
      }
      frameContainer.style.display = "block";
    }

    function myFunctionzone5() {
      var x = document.getElementById('zone5');
      if (x.style.display === 'inline') {
        x.style.display = 'none';
      } else {
        x.style.display = 'inline';
      }
      frameContainer.style.display = "block";
    }

    function myFunctionslas() {
      var x = document.getElementById('slas');
      if (x.style.display === 'inline') {
        x.style.display = 'none';
      } else {
        x.style.display = 'inline';
      }
      frameContainer.style.display = "block";
    }

    function myFunctionhiks() {
      var x = document.getElementById('hiks');
      if (x.style.display === 'inline') {
        x.style.display = 'none';
      } else {
        x.style.display = 'inline';
      }
      frameContainer.style.display = "block";
    }
#iframeContainer {white-space: nowrap; display: none;}
#iframeContainer iframe {display: none;}
<button onclick="myFunctionui()">^</button>

<div id="ui">
  <button onclick="myFunctiontic()">TICs</button>
  <button onclick="myFunctionlab()">LABs</button>
  <button onclick="myFunctionzone1_4()">ZONE 1-4</button>
  <button onclick="myFunctionzone5()">ZONE 5</button>
  <button onclick="myFunctionslas()">SLAS</button>
  <button onclick="myFunctionhiks()">HIKS</button>
</div>

<div id="iframeContainer">

  <iframe id="tic"  src="https://itcrops.itap.purdue.edu/opstools/ticstatus/ticstatus.cgi" width="130" frameborder="0"></iframe>
  <iframe id="lab" src="https://itcrops.itap.purdue.edu/opstools/labstatus/labstatus.cgi" width="130" frameborder="0"></iframe>
  <iframe id="zone1_4" src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/lastations1_4.cgi" width="250" frameborder="0"></iframe>
  <iframe id="zone5" src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/lastations5.cgi" width="250" frameborder="0"></iframe>
  <iframe id="slas" src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/slastations.cgi" width="250" frameborder="0"></iframe>
  <iframe id="hiks" src="https://itcrops.itap.purdue.edu/opstools/pr/Dev/lastat/hiksstations.cgi" width="250" frameborder="0"></iframe>

</div>

关于javascript - 通过隐藏/显示重新定位 iframe，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42195843/

上一篇：html - 如何让行元素占据整个宽度？

下一篇：html - 显示:flex 属性无法在 Internet Explorer 中正确呈现

相关文章：

html - 如何在不使用表格的情况下排列我的文本框？ HTML/CSS

javascript - 使用 XSL 将 XML 属性作为 id 传递到 HTML

javascript - 固定水平滚动条

javascript - 使用 Selenium 修改 Javascript Navigator 对象

javascript - mootools 和 nodejs

javascript - (event.Target === document.getElementById ("id")) 返回 false，即使它们指向同一元素

html - float div 在悬停时展开，将第二行 div 向左移动而不是向下移动

css - 悬停时如何影响父元素的下一个元素

javascript - 在新选项卡中打开链接时，使用 page.js 的 Polymer Routing 不会将 hashbang 添加到 URL

java - 适用于 Java EE 的良好 Ajax 框架

©2024 IT工具网  联系我们