javascript - 在 iframe 中制作全屏元素

Question

我正在开发一个允许我修改其他网站内容的浏览器扩展程序。

我知道 allowfullscreen 以及如何使 iframe 中的元素全屏显示并占据整个视口(viewport)。但是，在这个问题中，我想了解如何强制元素在 iframe 内全屏显示。

场景:
像 HBO 这样的网站, 在他们页面的几乎每个元素上使用 position: absolute ，包括 video 元素。当您尝试在他们的页面上全屏显示视频时，他们会通过更改多个节点的 width 和 height 属性来确定视口(viewport)的大小并相应地缩放元素。这与隐藏不必要的元素相结合，为用户提供了良好的全屏体验。由于他们的方法，手动修改这些元素的 CSS 非常困难。

设置位置:固定；顶部:0；左:0；宽度:100%； video 元素上的 height: 100%; 并不能真正发挥作用，至少，您还需要设置视频控件的样式。

是否可以允许元素进入“全屏”状态，但只能在 iframe 的范围内？请注意，网站的 Javascript 代码必须像成功切换到全屏一样执行，但仅限于 iframe 内。

Answer 1

在大多数浏览器中，大部分正文都有默认边距。您应该在带有 ifrmae 的页面中尝试此代码:

* {
   margin:0;
}

或

body {
    margin:0;
}