iOS Safari在iframe中不滚动锚点

I have an HTML page with an iframe whose contents I need to scroll to a certain location upon loading. My example works fine in most browsers except iOS Safari - which is the one I really need. It tends to work in iOS Safari on the first page load, but generally any refreshes after that presents the iframe content scrolled to the top.

我有一个带有iframe的HTML页面，它的内容需要在加载时滚动到某个位置。我的示例在大多数浏览器中运行良好，除了iOS Safari——这正是我真正需要的。在iOS Safari中，它通常只在第一个页面加载时使用，但通常情况下，在第一个页面加载之后，iframe内容会滚动到顶部。

I've read about problems where redirects cause the #anchorname to be dropped, but that isn't what is going on in this case.

我读过关于重定向导致#anchorname被删除的问题，但在这种情况下不是这样的。

The real iframe content and the main page are on different domains. I can influence the content of the iframe, but I don't have control over it. It is also used for other purposes, so I'd have limited ability to do anything custom that could interfere with that.

真正的iframe内容和主页位于不同的域中。我可以影响iframe的内容，但我无法控制它。它也被用于其他目的，所以我有有限的能力去做任何可能会干扰它的定制。

Live link here: https://s3.amazonaws.com/ios-iframe-test/iframe_test.html

生活链接:https://s3.amazonaws.com/ios-iframe-test/iframe_test.html

Here is the parent content:

以下是家长的内容:

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" name="viewport">

    <style type="text/css">

      #root {
        position: relative;
      }

      #wrapper {
        height: 300px;
        width: 300px;
        overflow-x: hidden;
        overflow-y: scroll;
        position: relative;
        -webkit-overflow-scrolling: touch;
      }

      iframe {
        width: 100%;
        height: 100%;
      } 

    </style>

  </head>
  <body>
    <h1>Why won't this iframe scroll to where I want?</h1>
    <div id="root">
      <div id="wrapper">
        <iframe src="https://s3.amazonaws.com/ios-iframe-test/iframe_content.html#scrolltome"></iframe>
      </div>
    </div>
  </body>
</html>

And here is the iframe content:

这是iframe内容:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>

  <h1>Have some ipsum...</h1>
  <p>
    Lorem... (live example has much more here just to make the scrolling apparent)
  </p>

  <h1 style="color: red;">
    <a name="scrolltome" id="scrolltome">This is where I want to scroll></a>
  </h1>

  <p>
    Lorem...
  </p>

</html>

1 个解决方案

#1

This is due to an iOS Safari bug whereby the iframe expands to the height of its content. You can verify this using Safari desktop debugger and running:

这是由于一个iOS Safari错误，iframe扩展为其内容的高度。您可以使用Safari桌面调试器进行验证，并运行:

document.querySelector('iframe').offsetHeight

document.querySelector .offsetHeight(iframe的)

The solution is to reduce the height of the iframe body by placing your content into a position: fixed container and allowing it to scroll.

解决方案是通过将内容放置到一个位置来降低iframe主体的高度:固定容器并允许它滚动。

For example, place the contents of the body into a <main> tag and set the style as follows:

例如，将正文的内容放入

标记，并设置样式如下:

    <html>
     <head>
       <style>
          main {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            padding: 10px;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            z-index: 1;
          }
       </style>
     </head>
     <body>
       <main>
          <h1>Have some ipsum...</h1>
          <p>Lorem... (live example has much more here just to make the scrolling apparent)</p>
          <h1 style="color: red;">
            <a name="scrolltome" id="scrolltome">This is where I want to scroll</a>
          </h1>
          <p>
             Lorem...
          </p>
       </main>
     </body>
    </html>

This tells Safari the iframe body is the same height as the page that contains it, but its content is scrollable. Your anchors will now work.

这告诉Safari iframe主体与包含它的页面的高度相同，但是它的内容是可滚动的。你的锚现在可以工作了。

#1