Question

我有一个带有固定标题div的页面，如工具栏和从相同/不同域加载内容的Iframe。问题是只要点击iframe中的链接，它就会将页面滚动到顶部隐藏工具栏本身。这种情况发生在桌面/移动webkit浏览器中。

注意： - 我找到了为什么iframe在点击其中的任何链接时滚动父页面的原因，事实证明，如果iframe中的锚标记具有空哈希值，即href =“＃”如果单击它们，则会导致父页面滚动到iframe启动的位置。这只发生在webkit浏览器中。这在FF中是不可重复的。

Answer 1

如果您在Javascript中处理问题，只需使用以下代码：

ifrm.setAttribute("onload","scroll(0,0);"); //(ifrm is the id of the iframe)

或

<script language="javascript"> 
    function totop() { 
        scroll(0,0); 
    } 
</script>

并在你的hrame for iframe中添加一个onload属性，如下所示：

<iframe name="iframe" onload="totop()">

从另一个论坛获得第二个解决方案，并改为第一个以满足我的要求，因为我正在创建iframe元素并在javascript而不是在html中设置其属性。它适用于chrome和IE。 FF首先没有问题。

Answer 2

试试这个JavaScript解决方案......

    function autoScroll() {
        window.scroll(0,200); // Horizontal/Vertical Position
    }

    <a href='javascript:autoScroll()'>Normal Link</a>

单击时，这将自动将窗口滚动到某个点（从顶部向下200像素）。或者，您可以使用以下内容自动滚动页面加载：

    <body onLoad="javascript:autoScroll()">

好的，这是另一个似乎有效的解决方案（此页面的修改版本：

Stack Overflow - Scrolling an iframe with javascript?

首先，制作网页：home.html，container.html＆amp; website.html

在home.html上，输入：

<html>
<head>
<title>Home</title>
</head>
<frameset rows="*,1000">
<frame src='container.html' noresize='yes' frameborder='0' marginheight='0' marginwidth='0' scrolling='no'>
<frame src='website.html' noresize='yes' frameborder='0' marginheight='0' marginwidth='0' scrolling='no'>
</frameset>
</html>

在container.html上：

<html>
<head>
<title>Container</title>
</head>
<body bgcolor='#ff0000'>
Any content you want...
</body>
</html>

在website.html上：

<html>
<head>
<title>Website</title>
</head>
<body onLoad="window.scrollTo(0,150)">
<iframe id='iframe' src='http://www.cnn.com" height='1000' width='100%' frameborder='0' marginheight='0' marginwidth='0' scrolling='no'>
</iframe>
</body>
</html>

现在就是这样 - 无论你从cnn.com上的那个起始页面转到什么页面，页面总是向下移动150个像素。在home.html上，1000指的是从页面底部到顶部向上的像素。因此，如果您将其设置为100，您将在浏览器的顶部看到container.html页面，在底部100像素，您将看到website.html（其内容向下移动150像素）。我将高度设置得如此之高（1000）的原因在于它可以使用浏览器窗口的整个高度 - 除非你想要它们，否则任何人都不会看到container.html。你可能不得不搞乱值/滚动/等。准确地得到你需要的东西。

这应该让你工作！

iframe由于其中的链接而滚动

2 个答案: