我正在开发一个允许我修改其他网站内容的浏览器扩展程序。
我知道 allowfullscreen
以及如何使 iframe
中的元素全屏显示并占据整个视口(viewport)。但是,在这个问题中,我想了解如何强制元素在 iframe 内全屏显示。
场景:
像 HBO 这样的网站, 在他们页面的几乎每个元素上使用 position: absolute
,包括 video
元素。当您尝试在他们的页面上全屏显示视频时,他们会通过更改多个节点的 width
和 height
属性来确定视口(viewport)的大小并相应地缩放元素。这与隐藏不必要的元素相结合,为用户提供了良好的全屏体验。由于他们的方法,手动修改这些元素的 CSS 非常困难。
设置位置:固定;顶部:0;左:0;宽度:100%;
并不能真正发挥作用,至少,您还需要设置视频控件的样式。video
元素上的 height: 100%;
是否可以允许元素进入“全屏”状态,但只能在 iframe 的范围内?请注意,网站的 Javascript 代码必须像成功切换到全屏一样执行,但仅限于 iframe
内。
最佳答案
在大多数浏览器中,大部分正文都有默认边距。您应该在带有 ifrmae
的页面中尝试此代码:
* {
margin:0;
}
或
body {
margin:0;
}
关于javascript - 在 iframe 中制作全屏元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55114807/