javascript - 在绝对 div 中嵌入 iframe 时的浏览器问题

Question

在绝对定位的 div 中嵌入具有特定 src 的 iframe 时，我遇到了一个奇怪的问题。 这是页面的基本标记:

.container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
html, body {
    padding: 0;
    margin: 0;
}
.content {
    position: absolute;
    top: 50px;
    right: -400px;
    width: 300px;
    height: 400px;
    background-color: blue;
}
iframe {
    width: 300px;
    height: 200px;
}

<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo sit amet elit sed cursus. Fusce nibh nibh, venenatis consectetur hendrerit sed, aliquam sit amet eros. Sed sem augue, tristique ut odio sit amet, euismod bibendum nunc. Nullam ac ligula pharetra, ultrices lorem id, porttitor enim. Nullam sit amet sagittis erat.
    <div class="content">
        <iframe src="https://app-apac.thebookingbutton.com/properties/yaangcomedirect"></iframe>
    </div>
</div>

div .container 覆盖整个页面；在它里面，有一个 div .content 相对于 .content div 绝对定位不应该是可见的，被 right:-400px 隐藏属性及其宽度，即 300px。

当 iframe 加载时，整个页面似乎向左“滑动”了。您可以通过插入的虚拟文本(现在已剪切)和 iframe(现在部分可见)看到此行为。

当 iframe 仍在加载时显示: https://i.imgsafe.org/89a753d.jpg

加载 iframe 时，显示如下: https://i.imgsafe.org/8820624.jpg

我在 Chrome、Firefox 和 Edge 的最新稳定版本中遇到了这个问题，所以我认为这可能不是浏览器问题。 我确信 iframe 的其他来源工作得很好并且没有显示这个问题。 此外，我知道跨域框架无法访问顶级框架的文档属性，这可能是让这个故事变得非常奇怪的原因。

此外，在 Chrome 或 Firebug 的开发人员控制台中，没有任何节点显示样式属性(如果某些 javascript 可以修改原始标记)。 很抱歉，我无法控制 iframe 内容，这在大多数情况下都是跨域的。

你能告诉我更多吗？我读过 this question ，这似乎是一个类似的案例，但没有帮助。

附言这是我的第一个 StackOverflow 问题，希望我写得很好 :) 请随时询问更多相关信息。

编辑:绝对定位的 div 必须在该位置。显然它应该被隐藏，这是想要的行为。我不明白为什么它在 iframe 加载后突然变得可见。

EDIT2:我已经简化了代码，现在 html, body 规则只是为了切断页面周围的空白区域。

Answer 1

您的代码中有两个问题。

第一个是无用的复杂性。

第二个问题是定位错误。 right 属性会将您的元素从右边缘放置 x units。当你给它的值小于零时。它将放置在右边缘的后面。

这是工作 fiddle :JSFiddle .

MDN on position property .

MDN on right property .

那么为什么您的代码不起作用？因为你的 overflow: hidden; width: 100%; 赋予几乎所有元素(无用的复杂性，只需将其添加到您真正需要它的地方；同时避免给 html 赋予任何规则- 这可能很棘手)。加载位置错误的 iframe 后，浏览器滚动到它，“一半” 的内容因 溢出 而被 chop 。

更新 fiddle :here .

更新的 fiddle#2(最好的):JSFiddle .