javascript - 滚动到 iframe 中的特定 ID，同时保留父页面位置

Question

我需要能够按需在 iframe 中加载特定页面，因此我使用了一个简单的包装器:

function updateFrame(url) {
    frames[0].location = url;
}

然后我被要求将页面加载到一个特定的点，这是非常重要的，因为页面不在我的控制范围内并且并不总是 <a name> anchor 依赖。所以一些探索表明 ID 可以用作 anchor 。

也就是说，你可以滚动到<div id = "somewhere-down-the-line">与:

updateFrame("http://host/page#somewhere-down-the-line");

除了这个调用还会向上滚动整个视口(viewport)，所以上面的 <div>转到顶部，其上方父页面中的所有内容都滚出 View 。

如何修改 updateFrame(url)以便它在 <iframe> 内滚动页面但页面的其余部分保持原样？

这个 hack 在 Firefox 20.0.1/Windows 上对我有用。本质上，我先加载页面，然后跳转到目标:

function updateFrame(url) {
    if (url.indexOf('#') > -1) {
        mainPage = url.split('#')[0];
        frames[0].location = mainPage;
    }
    frames[0].location = url;
}

我也希望能够在其他浏览器中使用它。我一直在努力让它在 Chrome 中运行。也许我什至会尝试 Internet Explorer...

Answer 1

如果 hack 没问题，而你正在寻找的是跨浏览器，请尝试使用 scrollTop重置您所在的位置。

例如如果它是滚动的 body

function updateFrame(url) {
    //save where you were
    var oldScroll = document.body.scrollTop;

    //this moves our body!
    frames[0].location = url;

    //move it back
    document.body.scrollTop = oldScroll;
}

当然，如果它实际上不是滚动整个视口(viewport)而是修改父 div 或其他内容，则 scrollTop 属性也会在该元素上。

让我知道这是否可行，但搞砸了框架上的滚动，因为我可以修改它以解决两个 scrollTop 之间的差异