使 iframe 内容溢出 iframe 范围之外
Posted
技术标签:
【中文标题】使 iframe 内容溢出 iframe 范围之外【英文标题】：Make iframes content overflow outside iframe extents 【发布时间】：2013-06-29 08:15:45 【问题描述】：我有一个包含iframe 的网页。在 iframe 里面是一个嵌入的 Youtube 视频。当我播放这个视频时，我会放大（扩大）它的大小。随着视频的增长，并非所有视频都可见，因为 iframe 不够宽。
是否可以使 iframe '溢出其内容'，即使视频在 iframe 宽度之外可见（请参阅下面的屏幕截图，了解我想要实现的目标的清晰示例）。
这是网页当前的外观：
这就是我想让视频完全成长后的样子：
请注意，我只是无法使 iframe 更宽。我尝试为 iframe（及其所有子元素）提供 CSS overflow: visible，但它并没有改变任何东西。
这是一个网页排列方式的简单示例：
....head, opening html tag, etc. up here
<body>
<div id="outerContainer" style="overflow: visible">
<div id="navBar">...</div>
<div id="content style="overflow: visible">
<iframe src="myHelpDocumentation.html" style="overflow: visible">
<!-- Inside this iframe/webpage are the embedded Youtube videos.
Each video is an iframe itself (that sits inside a div). -->
</iframe>
</div>
</div>
</body>
您知道使用 CSS 或 HTML 在 iframe 范围之外显示视频的方法吗？我可以使用 javascript 从 iframe 中删除视频（iframe）并将其放在主网页，但您不认为这将是非常糟糕的网站设计吗？
【问题讨论】：
使用新窗口并将视频附加到其中，然后将其最大化.. 因为如果没有另一个容器，您无法将内容溢出帧 @CME64 感谢您的评论。你说的新窗口，是指新的弹窗，新的文档，创建一个div并追加到父文档的末尾，究竟是什么？ window.open().. 参考w3schools.com/jsref/met_win_open.asp @CME64 制作弹出窗口不是解决方案。像往常一样，老板想要一个优雅的解决方案。希望它看起来像 iPad 视频功能 - 增长到特定大小然后播放。 让我为你做一些测试和例子 【参考方案1】：[更新和编辑]
window.open 适用于 IE（就像在 window.open('iframe.html','','fullscreen=1,channelmode=1'); 中一样，但我想为 IE 找到一个合适的方法这样它就不会像我为其他）
但我发现了一种更好的方法，适用于 chrome、safari 和 FF，因为它们不支持剧院模式，
你的 iframe 应该是这样的：
<iframe src="iframe.html" allowFullScreen></iframe>
这是您的 iframe 的内容页面：
<html>
<head>
<title></title>
<style type="text/css">
.fullScreen
width:100%;
height:100%;
.minScreen
width:auto;
height: auto;
</style>
<script type="text/javascript" src="jquery-1.10.0.js"></script>
<script type="text/javascript">
$(document).ready(function()
var element = document.getElementById('container');
var maxed = false;
$('#max').click(function()
if(maxed)
if (document.mozCancelFullScreen)
document.mozCancelFullScreen();
element.className = "minScreen";
maxed = false;
else if (document.webkitCancelFullScreen)
document.webkitCancelFullScreen();
element.className = "minScreen";
maxed = false;
else
if (element.mozRequestFullScreen)
element.mozRequestFullScreen();
element.className = "fullScreen";
maxed = true;
else if (element.webkitRequestFullScreen)
element.webkitRequestFullScreen();
element.className = "fullScreen";
maxed = true;
);
);
</script>
</head>
<body>
<div id="container">
<button id="max">click to maximize/minimize</button>
</div>
</body>
</html>
您可以在最大化或最小化/关闭时使用类（addClass 和 removeClass）来提供 css 来更正容器的高度和宽度（添加到代码中的样式）
IE兼容功能在路上..
编辑：如果您不想使用 Windows 或全屏，也许您应该从另一个角度看待问题。
解决方案是丢弃限制可访问性的 iframe，并将其替换为具有 css overflow:hidden 的 div，然后使用您的 iframe 页面填充此 div内容（您可以使用 ajax 或任何其他方法来加载内容）。 tada，你有类似 iframe 的东西，但它是同一文档的一个元素。那么，你可以通过两种方式控制溢出：
1- 在overflow:hidden 和visible 或auto 之间切换容器的css。
2- 将元素重新定位到容器 div 之外，并使用绝对定位将其显示在其他元素之上。
注意：不要害怕丢失滚动条，您可以自己构建或将内容的 top css 与 jquery ui 滑块的值链接到 absolute em> 内容的定位，您可以开始了。
【讨论】：
感谢您的代码。但是将视频div 附加到外部文档不是更简单吗？即$("#myVideo").append($("#myOuterDocument").body).css("position", "absolute").css("top", "150px");。这是我的后备解决方案，但我担心它不是良好的网站开发实践 - 从 iframe 中删除 div 并将它们插入其他网页。
是的，如果您不使用全屏或窗口，这可能是唯一的方法，我想到了，但后来我想到了如何从 iframe 中选择元素，因为它是一个不同的文档包含它。我没有测试那个理论，但你在这里告诉我一切。
FYI，这里是 Full Screen API caniuse.com/#feat=fullscreen的兼容性表【参考方案2】：
不，不可能……
来自iframe的文档完全是另一个文档，浏览器安全不会让你这样做...
编辑：您可以使用fullscreen 属性为容器使用透明背景色，并将嵌入的视频放在那里。
this answer 中描述了全屏代码。
【讨论】：
这是可能的，请在说之前检查我的代码，我在一小时前确信这是不可能的！ @CME64 基本上你使用fullscreen 属性，而不是 OP 要求的。
嗯，你是对的，但全屏解决方案是他应该考虑的，否则这是一个新窗口，他肯定不想要，因为这是我的第一个建议。如果他的问题是视频小于帧，他应该考虑重新调整视频容器的尺寸。
我灵光一现：他可以用透明色！所以，为你的帖子 +1。
并为您的建议 +1【参考方案3】：
这里没有建议的另一种方法是使用两个 iframe。第二个将漂浮在第一个之上并包含视频。您可以使用window.postMessage 在窗口之间进行通信。但是，如果您可以控制 iframe 和首页，那么您可以将视频放在首页的 div 中。两个页面仍然可以与window.postMessage 通信。
【讨论】：
以上是关于使 iframe 内容溢出 iframe 范围之外的主要内容，如果未能解决你的问题，请参考以下文章
javascript iframe高度问题 - 根据内部内容使iframe高度动态化
将iframe的内容高度赋值给iframe本身高度，并隐藏iframe里面的垂直滚动条，使iframe和父页面看成是一个整体页面