整页 <iframe>
Posted
技术标签:
【中文标题】整页 <iframe>【英文标题】：Full Page <iframe> 【发布时间】：2013-07-16 14:40:07 【问题描述】：我有下面的示例代码。这适用于所有浏览器，除了移动设备上的浏览器。
溢出标签是问题。
适用于除移动设备以外的所有设备：
margin: 0; padding: 0; height: 100%; overflow: hidden;
适用于所有移动设备而非计算机：
margin: 0; padding: 0; height: 100%;
什么是让它同时工作的最佳方式？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Layout</title>
<style type="text/css">
body, html
margin: 0; padding: 0; height: 100%; overflow: hidden;
</style>
</head>
<body>
<iframe src="http://www.cnn.com" />
</body>
</html>
【问题讨论】：
为什么不直接重定向到cnn.com？
cnn.com 就是一个例子。显示我试图阻止的行为。
只需将 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 添加到包含 html 的头部，响应性就会再次恢复（至少部分如此）。
【参考方案1】：
这是工作代码。适用于桌面和移动浏览器。希望能帮助到你。感谢大家的回复。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Layout</title>
<style type="text/css">
body, html
margin: 0; padding: 0; height: 100%; overflow: hidden;
#content
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
</style>
</head>
<body>
<div id="content">
<iframe frameborder="0" src="http://cnn.com"></iframe>
</div>
</body>
</html>
【讨论】：
当心，当我想在上面放置一个 iframe 时 - Chrome 出现了问题。我添加了关闭 和作品 似乎它正在从 iframe 中的内容中删除 响应性（即折叠列等）。但不知何故，只有在使用移动 Safari 打开页面时，而不是在调整桌面浏览器大小时。有什么想法会导致这种行为吗？ @psteinweber，您只需将<meta content='width=device-width, initial-scale=1.0' name='viewport'> 添加到包含页面。
必须使用vw 而不是% 来获得width 和height 属性才能在Chromium 81 中正确对齐。否则就像一个魅力。
对我来说，它也可以在没有设置 #content 部分的情况下工作。谢谢【参考方案2】：
这是跨浏览器且完全响应：
<iframe
src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"
style="
position: fixed;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
height: 100%;
">
</iframe>
【讨论】：
这看起来很整洁，比公认的解决方案效果更好。【参考方案3】：把它放在你的 CSS 中。
iframe
width: 100%;
height: 100vh;
【讨论】：
【参考方案4】：这是我过去使用的。
html, body
height: 100%;
overflow: auto;
同样在iframe添加如下样式
border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%
【讨论】：
感谢您的回复，但它本质上是我所拥有的，所以它不起作用。在移动浏览器上，它会切断任何溢出的内容并且不允许您滚动。 @Lacer 尝试将overflow: hidden 替换为overflow: auto
确实尝试过。在移动浏览器上它仍然会切断它，而在桌面浏览器上它会导致双滚动
不，桌面浏览器中的双滚动并在移动浏览器中被切断【参考方案5】：
对于全屏帧重定向和类似的事情，我有两种方法。两者都可以在移动设备和桌面设备上正常运行。
请注意，这是完整的跨浏览器工作的有效 HTML 文件。只需根据您的需要更改 title 和 src。
1.这是我最喜欢的：
<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-1 </title>
<meta name=viewport content="width=device-width">
<style>
html, body, iframe height:100%; width:100%; margin:0; border:0; display:block
</style>
<iframe src=src1></iframe>
<!-- More verbose CSS for better understanding:
html height:100%
body height:100%; margin:0
iframe height:100%; width:100%; border:0; display:block
-->
或 2. 类似的东西，略短：
<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-2 </title>
<meta name=viewport content="width=device-width">
<iframe src=src2 style="position:absolute; top:0; left:0; width:100%; height:100%; border:0">
</iframe>
注意：上面的例子避免使用height:100vh，因为旧的浏览器不知道它（现在可能没有实际意义）并且height:100vh并不总是等于@移动浏览器上的 987654327@（此处可能不适用）。否则，vh 会简化一些事情，所以
3.这是一个使用 vh 的示例（不是我最喜欢的，不太兼容没有什么优势）
<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-3 </title>
<meta name=viewport content="width=device-width">
<style>
body margin:0
iframe display:block; width:100%; height:100vh; border:0
</style>
<iframe src=src3></iframe>
【讨论】：
【参考方案6】：将 iframe 设置为高度 100vh 和宽度 100%：
<iframe src="https://***.com"
style="
position: fixed;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
height: 100%;
">
</iframe>【讨论】：
以上是关于整页 <iframe>的主要内容，如果未能解决你的问题，请参考以下文章