让多个 iframe 像常规窗口一样拖动、调整大小和最小化
Posted
技术标签:
【中文标题】让多个 iframe 像常规窗口一样拖动、调整大小和最小化【英文标题】：Make multiple iframes drag, resize and minimize like a regular window 【发布时间】：2016-11-16 00:56:27 【问题描述】：我正在开发一个工作仪表板，我在一个网页上打开了多个iframes，每个iframe 都有一个不同的站点。我已经能够让div 持有iframes 来调整大小和拖动，但是当我按下左上角的图像时，我无法将其最小化。到目前为止，这是我所拥有的：
// javascript Document
$(function () "use strict";
$("#framewrap") .resizable() .draggable();
);.body_padding
padding: 16px;
#framewrap
padding-right: 10px;
padding-left: 10px;
padding-bottom: 28px;
background-color: #277099;
width: 512px;
height: 90px;
-webkit-box-shadow: 2px 2px 16px -2px;
box-shadow: 2px 2px 16px -2px;
border-radius: 12px;
position: absolute;
#frame
width: 100%;
height: 100%;
background-color: #fff;
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div>
<div id="framewrap">
<span style="color: #FFFFFF; font-size: small; font-style: normal; font-weight: 100;">Window 1</span>
<img src="http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/minimize_window.png" align="right"/>
<iframe id="frame" src=""></iframe>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/main.js"></script
</body>这个想法是我可以按下右侧的最小化按钮，它将包装器div的高度和宽度更改为高度90px和宽度256px。我需要在一个页面中同时打开多个iframes，可以根据需要单独移动、调整大小和最小化。任何帮助表示感谢谢谢！
【问题讨论】：
首先，如果你需要多个 iframe，你应该避免使用 ids ;) 使用类来代替 【参考方案1】：为了将它扩展到多个窗口，我将一些基于 ID 的元素切换为基于类的元素。您还包含了几次 jQuery，我对其进行了简化。
我认为这应该让你继续前进。它基本上是容器上最小化类的简单切换。
// JavaScript Document
$(function()
"use strict";
$(".framewrap").resizable().draggable();
$(".framewrap .actionIcon").on("click", function()
$(this).closest(".framewrap").toggleClass("min");
);
);.body_padding
padding: 16px;
.framewrap
padding-right: 10px;
padding-left: 10px;
padding-bottom: 28px;
background-color: #277099;
width: 512px;
height: 90px;
-webkit-box-shadow: 2px 2px 16px -2px;
box-shadow: 2px 2px 16px -2px;
border-radius: 12px;
position: absolute;
.framewrap span
color: #FFFFFF;
font-size: small;
font-style: normal;
font-weight: 100;
.framewrap .actionIcon
display: inline-block;
float: right;
height: 18px;
width: 18px;
background-image: url(http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/minimize_window.png);
background-size: cover;
background-position: center center;
.framewrap.min
height: 90px !important;
width: 256px !important;
.framewrap.min .actionIcon
background-image: url(http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/maximize_window.png);
.frame
width: 100%;
height: 100%;
background-color: #fff;
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<div>
<div class="framewrap">
<span>Window 1</span>
<span class="actionIcon"></span>
<iframe class="frame" src=""></iframe>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>【讨论】：
嘿乔恩，这工作得很好，我可以让多个框架像魅力一样独立工作。现在有什么方法可以将我当前单击的框架更改为 zindex 吗？许多窗户笨拙地重叠 @xpt 你想要什么版本的 jquery？还是第2版？我问，因为它现在有点过时了。 @xpt 谢谢，只是其中一个库是通过 http 而不是 https 调用的 现在完美。谢谢 JonSG！以上是关于让多个 iframe 像常规窗口一样拖动、调整大小和最小化的主要内容，如果未能解决你的问题，请参考以下文章