如何使用整页 iframe 在页面上隐藏移动浏览器地址栏答案

【问题标题】：How to hide mobile browser address bar on page with full-page iframe如何使用整页 iframe 在页面上隐藏移动浏览器地址栏
【发布时间】：2021-04-08 23:18:11
【问题描述】：

我有一个网页，其唯一内容是 <iframe> 指向托管在其他地方的网络应用程序。对于用户来说，直接访问外部站点应该与访问 iframe 版本没有区别。

到目前为止，一切正常，除了移动浏览器上的一个烦人的问题。

问题在于，当移动用户滚动 iframe 的内容时，移动浏览器的地址栏不会像往常一样自动隐藏。这会导致部分内容不可见。

我认为这是因为顶级文档没有滚动，只有 iframe 的内容有。

这是在外部页面的<head>：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" />

这是 iframe 标签：

<iframe src="https://external.com/" frameborder="0" class=""></iframe>

这是我应用的 CSS：

iframe {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    pointer-events: all !important;
    overflow: hidden;
}

body {
    min-height: 100vh;
}

我尝试了解决方案mentionned here 将孩子的元视口标签复制到父级，但没有成功。

【问题讨论】：

标签： javascript html css iframe wysiwyg

【解决方案1】：

您能否通过使用一个简单的函数在滚动时显示/隐藏 IFRAME div 来掩盖这个问题？

$(window).scroll(function() { // when the page is scrolled run this
    if($(this).scrollTop() != 0) { // if you're NOT at the top
        $('#youriframeDIV'); // add
    } else { // else
        $('#youriframeDIV'); // remove
    }
});

【讨论】：

谢谢，但这不起作用，因为 iframe 是父页面上的 only 元素。我编辑了我的问题以使其更清楚