jQuery 使 iframe 内容溢出 iframe 范围之外
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17417517/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make iframes content overflow outside iframe extents
提问by sazr
I have a webpage that contains an iframe. Inside that iframeis an embedded Youtube video. When I play this video I make it scale up (grow) in size. As the video grows, not all the video is visible because the iframe is not wide enough.
我有一个包含iframe. 里面iframe是一个嵌入的 Youtube 视频。当我播放此视频时，我将其放大（变大）。随着视频的增长，并非所有视频都可见，因为 iframe 不够宽。
Is it possible to make the iframe 'Overflow its content', ie make the video visible outside the iframe width (please see below screen captures for a clear example of what I am trying to achieve).
是否可以使 iframe '溢出其内容'，即使视频在 iframe 宽度之外可见（请参阅下面的屏幕截图以获取我想要实现的清晰示例）。
This is how the webpage currently looks:
这是网页当前的外观：
This is how I would like to make the video look when it has fully grown:
这就是我想让视频完全长大后的样子：
Note I just cant make the iframe wider. I've tried giving the iframe (and all its child elements) the CSS overflow: visiblebut it doesn't change anything.
注意我不能使 iframe 更宽。我试过为 iframe（及其所有子元素）提供 CSS，overflow: visible但它没有改变任何东西。
This is a simple example of how the webpage is arranged:
这是网页排列方式的简单示例：
....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>
Do you know of a way using CSS or HTML to show the video outside the iframe extents?I could potentially use Javascript to remove the video(iframe) from the iframe and place it in the main webpage but this would be very bad website design dont you think?
您是否知道使用 CSS 或 HTML 在 iframe 范围之外显示视频的方法？我可能会使用 Javascript 从 iframe 中删除视频（iframe）并将其放置在主网页中，但这会是非常糟糕的网站设计，你不觉得吗？
回答by Ionic? Biz?u
No, it isn't possible...
不，这不可能……
The document from iframeis a completely another document, and the browser security will not let you to do this...
来自的文档iframe完全是另一个文档，浏览器安全性不会让你这样做......
Edit: you can use fullscreenproperty using transparent background color for container and put there your embedded video.
编辑：您可以使用fullscreen容器的透明背景颜色的属性并将嵌入的视频放在那里。
The fullscreen code was described in this answer.
这个答案中描述了全屏代码。
回答by CME64
[updated and Edited]
[更新和编辑]
window.open works fine for IE ( as in window.open('iframe.html','','fullscreen=1,channelmode=1');but I want to find a proper way for IE so that it doesn't reload the contentsas I did for the others)
but I found you a better way that works on chrome, safari and FF since they don't support theater mode,
window.open 对 IE 工作正常（就像在window.open('iframe.html','','fullscreen=1,channelmode=1');IE 中一样，但我想为 IE 找到一种正确的方法，这样它就不会像我为其他人那样重新加载内容）但我发现你有一种更好的方法可以在 chrome、safari 和FF 因为它们不支持影院模式，
your iframe should be like :
你的 iframe 应该是这样的：
<iframe src="iframe.html" allowFullScreen></iframe>
this is the content page of your 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>
you can supply that with css to correct the containers height and width, using classes (addClass and removeClass) when maximized or minimized/closed (style added to the code)
您可以使用 css 来纠正容器的高度和宽度，在最大化或最小化/关闭时使用类（addClass 和 removeClass）（添加到代码中的样式）
IE compatibility function is on the way ..
IE兼容功能正在开发中..
EDIT:maybe you should look at the problem from another angle if you don't want to use windows or fullscreen.
编辑：如果您不想使用 windows 或全屏，也许您应该从另一个角度看问题。
the solution would be discarding the iframewhich is restricting the accessibility and replacing it with a divthat has css overflow:hiddenand then populate this div with your iframe page's contents (you can use ajax or any other method to load the contents). tada, you have something like an iframe but it is an element of the same document. then, you can control the overflow in two ways:
解决方案是丢弃限制可访问性的 iframe，并用具有 css的 div 替换它，overflow:hidden然后用 iframe 页面的内容填充此 div（您可以使用 ajax 或任何其他方法来加载内容）。多多，你有一个类似 iframe 的东西，但它是同一个文档的一个元素。然后，您可以通过两种方式控制溢出：
1- toggle the container's css between overflow:hiddenand visibleor auto.
1- 在overflow:hidden和visible或之间切换容器的 css auto。
2- relocate the element outside the container div and use absolute positioning to show it over other elements.
2- 将元素重新定位到容器 div 之外并使用绝对定位将其显示在其他元素上。
note: don't be afraid of losing the scroll bar, you can build your own or just link your topcss of the contents with the jquery ui slider's value with absolutecontent's positioning and you are good to go.
注意：不要害怕丢失滚动条，您可以构建自己的滚动条，或者只是将内容的顶部css 与 jquery ui 滑块的值与绝对内容的定位链接起来，这样就可以了。
回答by gertas
The other way not suggested here would be to use two iframes. The second would float over the first one and would contain video. You can communicate between windows with window.postMessage. But if you have control over iframe and top page then you could put the video in divin top page. Still both pages can communicate with window.postMessage.
此处未建议的另一种方法是使用两个 iframe。第二个将浮动在第一个之上并包含视频。您可以使用window.postMessage. 但是，如果您可以控制 iframe 和首页，那么您可以将视频放在div首页中。两个页面仍然可以与window.postMessage.
