4

我需要能够按需在 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 ...

4

3 回答 3

3

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

例如，如果它是滚动的身体 

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 属性也将位于该元素上。

让我知道这是否可行，但会破坏框架上的滚动，因为我可以修改它以解决两个scrollTops之间的差异

于 2013-07-19T14:58:50.123 回答
1

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

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

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

于 2013-07-19T15:11:07.143 回答
1

在 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（感谢这个答案）具有预期的效果，尽管仅在控制台中。我仍在其他浏览器上进行测试；一个更优雅的解决方案总是受到赞赏:)

不过，正如问题中提到的，我也希望能够在其他浏览器中使用它。也许我什至会尝试 Internet Explorer ...

于 2013-05-15T08:19:43.223 回答