Question

我需要能够根据需要在iframe中加载特定页面，所以我使用了一个简单的包装器：

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

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

也就是说，您可以使用：

滚动到<div id = "somewhere-down-the-line">

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

除了此调用之外还会向上滚动整个视口，以便上面的<div>到达顶部，并且它上面的父页面中的所有内容都会滚出视图。

如何修改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

如果黑客行为正常，而您正在寻找的是跨浏览器，请尝试使用scrollTop重置您的位置。

E.g。如果它是滚动的身体

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;
}

当然，如果它实际上不是scrolls the entire viewport而是修改父div或其他东西，那么scrollTop属性也将在该元素上。

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

Answer 2

在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 28.0 / Windows上，调用updateFrame(url)，然后设置document.body.scrollTop = 0（感谢this answer）产生了预期的效果，虽然只在控制台中。我还在其他浏览器上测试;一个更优雅的解决方案总是受到赞赏：）

正如问题所述，我希望能够在其他浏览器中使用它。也许我甚至会尝试使用Internet Explorer ......

Answer 3

您可以尝试通过检测所需元素的高度来自行转动螺栓，并强制框架的scrollTop。

function updateFrame(url) {
    //get the parts
    var parts = url.split('#');
    //go to the url
    frames[0].location = parts[0];

    //if there was an anchor
    var anchor;
    if (parts.length > 0 && parts[1].length > 0) {
        //may want to account for a[name="PARTS[1]"] too
        anchor = frames[0].document.getElementById(parts[1]);

        //set the scroll of it yourself, using some sort of library to get "fullTop"
        frames[0].document.body.scrollTop = anchor.fullTop();
    }
}

"fullTop"等于iframe顶部与元素之间的距离像jQuery的.offset()或YUI的getXY(el).[1]

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

3 个答案: