Question

帮助了解下一个时刻。

在另一个页面上有一个页面通过iframe连接。假设连接页面（iframe.html）的布局具有以下形式：

<!DOCTYPE html>
<html>
<head>
    <title>iFrame</title>

    <style type="text/css">
        .inner__block {
            width: 100%;
            background: #f1f1b4;
            height: 100px;
            border-bottom: 3px solid black;
        }

        .test__block {
            width: 100%;
            height: 500px;
            background: #eceb51;
            border-bottom: 3px solid black;
        }

        h3 {
            margin-top: 0;
            padding-top: 0;
        }
    </style>
</head>
<body>
    <div class="inner__block">
        Very big iframe
        <br>
        <a href="#test">#test</a>
        <br>
        <a href="#test1">#test1</a>
        <br>
        <a href="#test2">#test2</a>
    </div>

    <div id="test" class="test__block">
        <h3>TEST</h3>
    </div>

    <div id="test1" class="test__block">
        <h3>TEST 1</h3>
    </div>

    <div id="test2" class="test__block">
        <h3>TEST 2</h3>
    </div>

    <div id="test3" class="test__block">
        <h3>TEST 3</h3>
    </div>
</body>
</html>

iframe所在的页面具有以下布局：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>

    <style>
        .iframe {
            display: block;
            width: 100%;
            height: 2131px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <h1>Test</h1>

    <div>
        <iframe class="iframe" src="iframe.html" scrolling="no" frameborder="no"></iframe>
    </div>
</body>
</html>

在这种情况下，iframe中的锚点跟随无效。

但是，如果将样式中iframe的高度减小一半，则锚点将开始按预期工作。

为什么锚点的行为取决于iframe的高度？

Answer 1

这是绝对正常的。而且浏览器无法知道您要实现的目标。

iframe是它自己的文档，带有单独的可滚动HTML。您的iframe太高了，以至于iframe的内容得以完整显示，因此没有滚动条（scrolling="no"除外）。

如果将iframe的高度更改为较小的值（例如800像素），并允许滚动iframe，则将更加清楚。然后您将看到iframe本身已滚动。参见this codepen进行演示

外部窗口因此无法洞悉内部窗口。

您可以做的是监听点击事件，查看是否涉及目标，将postMessage从iframe发送到带有目标目标位置的容器窗口，然后确定容器窗口是否应该滚动

David Bradshaw有一个解决方案：iFrame Resizer V4
这样可以自动调整框架的大小，并使滚动条按您的喜好工作。

要使该库正常工作，您需要将其添加到iframe.html：

<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.1.1/js/iframeResizer.contentWindow.min.js"></script>

并将其保存到container.html

<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.1.1/js/iframeResizer.min.js"></script>
<script>
// init the iframes to work with iframeresizer
iFrameResize({inPageLinks: true},
  ".iframe" // this is the selector for the iframes to work like this
);
</script>

这是一个有效的示例：https://codepen.io/HerrSerker/pen/eec95c1023a9933c579221e7a37b66dc?editors=1111 （这是iframe笔：https://codepen.io/HerrSerker/pen/85643c47de49983ca67c8898f74ef4fb?editors=1100）

为什么更改iframe高度时锚点会有不同的行为？

1 个答案: