如何移除含margin的跨域iframe内部滚动条？无法修改frame内容

代码示例 #

index.html #

<html>
<head>
    <style>
        iframe {
            height: 200px;
            width: 200px;
            border: 0;
        }
    </style>
</head>
<body>
<iframe src="frame.html" marginheight="0"></iframe>
</body>
</html>

frame.html #

<html>
<head>
    <style>
        body, html {
            height: 100%;
            background: #f88;
            margin: 0;
            box-sizing: border-box;
        }

        div {
            margin-top: 50px;
            background: #88f;
        }
    </style>
</head>
<body>
<div>content</div>
</body>
</html>

问题说明 #

iframe内部的body设置了100%高度，且内部div带有margin-top:50px，导致iframe出现滚动条。目前的限制是：

• 无法修改frame的HTML/样式代码
• frame内容来自其他域名
• 已排除方案：外层设overflow:hidden（仅视觉截断，滚动功能仍存在）、iframe设height:auto（无效果）

结论：无可行解决方案 #

受浏览器同源策略限制，跨域情况下父页面无法访问iframe内部的DOM或样式。这是浏览器的核心安全机制，目的是防止不同域名的页面之间互相篡改内容。

若要移除iframe内部的滚动条，必须修改iframe内部的代码（比如给body添加overflow:hidden），但由于无法操作跨域的iframe内容，没有其他可行的非截断式方案。

内容的提问来源于stack exchange，提问作者nzrp