使 iframe 内容溢出 iframe 范围之外答案

【问题标题】：Make iframes content overflow outside iframe extents使 iframe 内容溢出 iframe 范围之外
【发布时间】：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 视频功能 - 增长到特定大小然后播放。
让我为你做一些测试和例子

标签： javascript jquery html css iframe

【解决方案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 通信。

【讨论】：