可调整大小的响应式切换 iframe

Posted 2023-05-09

【中文标题】可调整大小的响应式切换 iframe

【英文标题】：Resizable responsive toggle iframes

【发布时间】：2021-07-14 15:19:47

【问题描述】：

我需要一个带有 2 个 IFRAME 的布局，可以通过 javascript 在屏幕上切换而不刷新内容（它们只是改变位置），并且可以调整列的大小。 在移动设备上，它们应该 100% 宽度堆叠。

Drawing example here

https://codepen.io/az3l10/pen/vYgVmeP

function toggleLayout() 
  document.querySelector('main').classList.toggle('social');
 

main div 
  position: absolute;
  width: calc(100% - 400px);
  height: 100%
  top: 0; 
  left: 0;


[orange] 
  position:absolute;
  right:0px;
  background-color: #FFAD77;


[yellow] 
    position: absolute;
  background-color: #FFE377;
  width:400px;
  height:30px;
  left:calc(100% - 400px);



[green] 
    position: absolute;
  background-color: lightgreen;
  width:400px;
  height:300px;
  left:calc(100% - 400px);
  top:30px;



[purple] 
  position: absolute;
  width:400px;
  height:calc(100% - 330px);

  left:calc(100% - 400px);
  top:330px;
  background-color: #FF77C8;
  


main.social div 
 




main.social [orange] 
 left:calc(100% - 400px);
 top:30px;
  width:400px;
  height:1000px;

  background-color: #FFE377;
  
  



main.social [green] 
 position: absolute;
 top:0;
 left:0;
 width: calc(100% - 400px);
 height: calc(100%);
 
  background-color: lightgreen;



@media only screen and (max-width: 1580px) 

[orange] 
  position:relative;
  left:0px;
  top:0px;
  width:100%;
  background-color: #FFAD77;


[yellow] 
  position:relative;
  left:0px;
  top:0px;
  width:100%;
  background-color: #FFE377;


[purple] 
  position:relative;
  left:0px;
  top:0px;
  width:100%;
  height:600px;
    background-color: #FF77C8;
  

[green] 
  position:relative;
  left:0px;
  top:0px;
  width:100%;
  height:10px;
  background-color: lightgreen;
   



main.social.sociald 
  height:600px;



main.social.chatd 
  height:10px;

<main>
 <div orange> 
ORANGE
  </div>

    <div yellow>

        <button onclick="toggleLayout">TOGGLE</button>

        
    </div>

    <div green id="sociald">    
    <figure style="width:100%;height:100%;margin:0px">
        <iframe id="framesoc" border=0 style="width:100%;height:100%" src="https://www.google.com"></iframe>
        </figure>
    
    </div>

    <div purple id="chatd"> 
        
        <figure style="width:100%;height:100%;margin:0px">
        <iframe id="framechat" border=0 style="width:100%;height:100%" src="https://www.calm.com/breathe"></iframe>
        </figure>
        
    </div>

</main>

 
</body>
</html>

我遇到的问题是，由于 DIV 位置是绝对的，我无法调整列的大小，如果我改变了位置，我就无法切换。

有人可以帮忙吗？

【问题讨论】：

你尝试了什么？你的代码在哪里？

欢迎来到 SO。不幸的是，您似乎误解了它的工作原理。它不是免费的代码编写服务，您只需发布需求。预计您发布代码尝试解决您自己的问题，并在其他人无法按预期工作时提供帮助。见How to Ask和minimal reproducible example

【参考方案1】：

如果可以使用CSS Flexbox 或CSS Grid 实现绝对定位，则不要使用。

移动优先

我们知道我们想要两个元素 A 和 B 出现在我们的网站上，并且这两个元素属于同一类。这意味着，我们创建了两个包含在一个分组元素中的元素：

/* Ignore; for demonstration-purposes */
html height:100%
body margin:0;min-height:100%
#a, #b min-width:100px;min-height:100px
#a background-color:red
#b background-color:blue

<div class="wrapper">
  <div id="a"></div>
  <div id="b"></div>
</div>

这两个（本质上）设置了display: block，默认CSS就足够了，所以不需要写任何东西。

现在，当在更大的屏幕上查看网站时，我们希望有...：

... 2×2 网格 ...网格右上角的一个切换按钮（简单来说：一个复选框），用于交换 A 和 B 的位置 ...占据整个第一列的第一个（“选定”）元素

我们修改 HTML 以适应我们想要的结果，然后开始编写 CSS。 我们基本上禁用了仅限大屏幕的元素，并在@media-规则中（重新）启用它们和其他想要的样式。另外，我们添加网格，并默认为#a 赋予selected 类。

现在，要添加交换功能，我们需要一些 JavaScript。 我们想将 selected-class 添加到 A 或 B，具体取决于复选框 checked-property。

总而言之，代码现在看起来像这样：

const a = document.querySelector('#a');
const b = document.querySelector('#b');
document.querySelector('input').addEventListener('click', evt => 
  if (evt.target.checked) 
    b.classList.add('selected');
    a.classList.remove('selected');
   else 
    a.classList.add('selected');
    b.classList.remove('selected');
  
);

/* Alternatively (same effect)
const wrapperElements = document.querySelectorAll('.wrapper>*:not(label)');
document.querySelector('input').addEventListener('click', evt => 
  let i = Number(!!evt.target.checked);
  wrapperElements[i].classList.add('selected');
  wrapperElements[++i % 2].classList.remove('selected');
);
*/

/* Ignore; for demonstration-purposes */
html height:100%
body margin:0;min-height:100%
#a, #b min-width:100px;min-height:100px
#a background-color:red
#b background-color:blue

/* The CSS */
label display: none

@media only screen and (min-width: 768px)  /* When at least 768px, then: */
  .wrapper 
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr auto;
  
  label 
    display: initial;
    grid-area: 1 / 2 / 2 / 3;
  
  .selected grid-area: 1 / 1 / -1 / 1

<div class="wrapper">
  <label><input type="checkbox">Toggle A/B</label>
  
  <div id="a" class="selected"></div>
  <div id="b"></div>
</div>

【讨论】：

太棒了！！！我想现在我可以自己添加调整大小的列。非常感谢！