使iframe内容溢出iframe范围
saz*_*azr 13 html javascript css iframe jquery
我有一个包含的网页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)并将其放在主网页中但这会是非常糟糕的网站设计你不觉得吗？
[更新和编辑]
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>
您可以使用 css 来纠正容器的高度和宽度，在最大化或最小化/关闭时使用类（addClass 和 removeClass）（样式添加到代码中）
IE兼容功能正在路上..
编辑：如果您不想使用窗口或全屏，也许您应该从另一个角度看待问题。
解决方案是放弃限制可访问性的iframe ，并将其替换为具有 css 的divoverflow:hidden，然后使用 iframe 页面的内容填充此 div（您可以使用 ajax 或任何其他方法来加载内容）。tada，你有类似 iframe 的东西，但它是同一文档的一个元素。那么，你可以通过两种方式控制溢出：
overflow:hidden1- 在和visible或之间切换容器的 css auto。
2-将元素重新定位到容器 div 之外，并使用绝对定位将其显示在其他元素之上。
注意：不要害怕丢失滚动条，您可以构建自己的滚动条，或者只是将内容的顶部css 与 jquery ui 滑块的值和绝对内容的定位链接起来，就可以了。