iframe控制显示范围，显示目标网页的特定区域，这对于特定场景非常有用，是一种简单高效的系统整合方案。
在新版本的浏览器中，vspace和hspace已经失效了。因此iframe显示特定内容只能采取嵌套iframe的方案。
例如，控制iframe仅显示https://www.wyr.me的头像部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轶哥</title>
</head>
<body>
<iframe src="https://www.wyr.me/" frameborder="0" scrolling="no"
style="position: absolute;top: -190px;left: -40px;height: 405px; width: 1024px;"></iframe>
</body>
</html>
其中，width相当于是屏幕宽度，影响响应式页面的呈现方式。需要呈现的内容，放置于页面左上角。效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轶哥</title>
</head>
<body style="background-color: #888">
<iframe src="iframe1.html" frameborder="0" scrolling="no"
style="position: absolute;top: 0px;left: 0px;height: 215px; width: 215px;"></iframe>
</body>
</html>
在第二层iframe中，只需要控制宽高即可实现对特定区域的显示。
嵌套多层iframe来显示特定区域几乎是目前唯一可行的方案。该方案也存在弊端，手机和PC可能显示效果不一致。
收藏本站，改天我们聊聊跨域下iframe通讯。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。