我有一个 Web 应用程序，它使用 iframe 将各种面板加载到 View 中。有时，使用 jQuery UI 选项卡将面板置于最前面，同时隐藏其他未使用的选项卡。在此特定实例中，其中一个 iframe 包含 jQuery UI 选项卡，而 jQuery UI 选项卡又包含 iframe。在某些情况下，在该 iframe 内，一个额外的 iframe 用于加载另一个软件面板。在大多数情况下，这一切都很好。但是，在这个第四级 iframe 的实例中，在 Internet Explorer 中，如果您更改 jQuery UI 选项卡然后返回以显示这个特定的 iframe，最里面的 iframe 仍然是白色的。奇怪的是，几乎任何操作(例如折叠相邻面板、在别处单击其他不相关的 jquery 选项卡或在 DOM 资源管理器中切换 CSS 属性)都会将 iframe 挤回 View 中。
<html>
<body>
...
<DIV style="HEIGHT: 858px; WIDTH: 1680px">
<IFRAME style="HEIGHT: 100%; WIDTH: 100%" src="..." frameBorder=0 scrolling=yes></IFRAME>
</DIV>
...
</body>
</html>
在 iframe 中，完整的 html(包括 和
标签)。<div class="ui-tabs-panel">
<iframe src="..."></iframe>
</div>
所以这似乎是一个与 Internet Explorer 相关的模糊 jQuery UI 错误。我想避免将某种代码更改放入我的 jquery-ui.js 文件中，尽管我还没有找到修复它的方法，所以我正在寻找关于我可以做些什么来“挤兑”的想法当您单击 jQuery UI 选项卡时，内部 iframe 重新进入 View 。
最佳答案
虽然此修复程序在放置在 jquery-ui-1.9.2.custom.js 的 _toggle 事件中时起作用，但您应该能够将其放置在您自己的“选项卡上选择”事件中，该事件也应该获得(事件, ui) 参数。
从选项卡向下钻取到第三级 iframe，并触发调整大小。奇怪的是，对此调用 resize() 并不能解决问题，但设置高度属性可以解决问题(我将其设置为零然后返回到原始高度，这可能是不必要的，但我觉得是正确的。)
tabSelected: function(event, ui) {
var toShow = ui.newPanel;
//....
toShow.find('iframe').each(function () {
var tabFrame = this;
$(tabFrame).contents().find('iframe').each(function () {
var workspaceFrame = this;
$(workspaceFrame).contents().find('iframe').each(function () {
var innerFrame = this;
var myHeight = $(innerFrame).attr('height');
$(innerFrame).attr('height', 0);
$(innerFrame).attr('height', myHeight);
});
});
});
//....
虽然没有必要，但我更喜欢将“this”关键字复制到局部变量以提高可读性。
关于jquery - jQuery UI 选项卡中的深层嵌套 iFrame 在 Internet Explorer 中保持隐藏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30461540/