时间戳

首页 > 解决方案 > Safari 上的全屏 iframe 中的 HTML 内容溢出

html - Safari 上的全屏 iframe 中的 HTML 内容溢出

问题描述

问题

我有一个网站，允许用户选择我的一个 HTML 项目，选择一个项目后，将显示一个全屏iframe供用户与项目交互而无需重新加载页面。

在我测试过的 Microsoft Edge（Chromium 版）中，里面的内容iframe可以向下滚动，不会溢出到外面。

iframe 在 Microsoft Edge 中的外观

但是在我的 iPad 目前拥有的 Safari 版本 10 上，内容实际上会溢出并且无法在iframe. iframe 在 Safari 中的外观

我所期望的

内容应该在里面（不是在外面）iframe并且内容应该能够上下滚动。

我试过的

我已经尝试从这个答案添加position: absolute样式scrolling=yes和overflow: scroll属性到 iframe：https ://stackoverflow.com/a/43828367/11418759但它什么也没做。

我也尝试从这个答案添加overflow: auto !important;和-webkit-overflow-scrolling: touch !important;到 iframe：https ://stackoverflow.com/a/53789759/11418759但同样，它也什么都不做。

导致问题的实际代码

#iframe_ {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    z-index: 30;
    border: 4px solid gray;
    background-color: white;
    display: block;
}
#abcd {
    margin: 0;
    height: 4px;
    background-color: gray;
    border: 1px solid gray;
}
#iframe_accbar {
    width: 100%;
    height: 20px;
    background-color: gray;
}
#iframe_accbar button {
    height: 20px;
    min-width: 50px;
    border: none;
    margin-left: 5px;
    margin-right: 5px;
    position: -webkit-sticky;
    position: sticky;
}
#iframe_accbar button:hover {
    background-color: rgb(180, 180, 180);
}
iframe {
    border: none;
    overflow: scroll;
    height: calc(100% - 26px);
}
<!DOCTYPE html>
<html>
    <head>
        <title>Just Some Title Here</title>
    </head>
    <body>
        <div id="iframe_">
            <div id="iframe_accbar">
                <button onclick="getId('iframe__').setAttribute('src', 'about:blank'); getId('iframe_').style.display = 'none'; document.getElementsByTagName('body')[0].style.overflow = 'initial'" style="background-color: #EFEFEF">Close</button><button onclick="window.open(getId('iframe__').getAttribute('src'), '_blank'); getId('iframe_').style.display = 'none'; document.getElementsByTagName('body')[0].style.overflow = 'initial'" style="background-color: #EFEFEF">Open in a new tab</button>
            </div>
            <hr id="abcd">
            <iframe title="A place to display my project" id="iframe__" scrolling="yes" src="https://quanmcpc.github.io/other_project/Vigenere_Cipher.html?nocache=340353" width="100%" allowfullscreen sandbox="allow-scripts allow-same-origin allow-pointer-lock allow-modals allow-popups"></iframe>
        </div>
    </body>
</html>

我想问的问题

所以在所有这些解释之后，我想问的一个问题是：如何iframe在 Safari 浏览器中使行为就像我测试过的浏览器（Microsoft Edge（Chromium 版本））一样？

标签： htmlcssiframesafari

解决方案

推荐阅读