我正在开发一个工作仪表板，我在一个网页上打开了多个 iframe，每个 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" alt="" width="18" height="18" 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 的高度和宽度256 像素。我需要在一个页面中同时打开多个 iframe，它们可以根据需要单独移动、调整大小和最小化。感谢任何帮助谢谢!!
最佳答案
为了将其扩展到多个窗口，我将一些基于 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>关于javascript - 使多个 iframe 像普通窗口一样拖动、调整大小和最小化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38351643/