3

我一直在搜索和搜索,但我对此感到非常困惑:我有一个 index.html 页面,其中有几个 iframe 以 100% 的宽度和高度堆叠在一起。该索引具有固定导航,其中 z-index 覆盖帧。我的索引基本上被javascript禁用了滚动。

因此,我试图将导航(位于索引页面上)链接到其中一个 iframe 中的特定锚点,该锚点将加载到该 iframe 中。我显然已经收集到这说起来容易做起来难。为什么我<a href="iframe-src.html#anchor" target="iframe">不知道为什么不起作用,但显然它没有。

这有什么解决方法?这是我的索引的基本设置方式:

    <html>
    <head>

    ** some CSS and Javascript here that I know's irrelevant. **

    <script type="text/javascript">
        document.documentElement.style.overflow = 'hidden';  // firefox, chrome
        document.body.scroll = "no";    // ie only
        document.documentElement.style.overflowX = 'hidden';     // horizontal scrollbar will be hidden
        document.documentElement.style.overflowY = 'hidden';     // vertical scrollbar will be hidden
    </script>
</head>
<body>
<iframe src="landing.html" name="landing" style="position: relative; width: 100%; height: 100%; border: 0;"></iframe>   
<iframe src="work1.html" name="work-iframe" style="position: relative; width: 100%; height: 100%; z-index: 1;"></iframe>
<iframe src="info.html" name="info" style="position: relative; width: 100%; height: 100%; z-index: 4;"></iframe>

<nav>   
    <a href="work.html#parker" target="work-iframe">PARKER BROTHERS CLASSICS</a>

    <a href="work.html#bohs" target="work-iframe">BOHS & HONS</a>

    <a href="work.html#companion" target="work-iframe">THE COMPANION SERIES</a>

    <a href="work.html#balmer" target="work-iframe">BALMER</a>

    <a href="work.html#hoeweler" target="work-iframe">MICHAEL HOEWELER</a>

    <a href="work.html#ampugreen" target="work-iframe">AMPUGREEN</a>

    <a href="work.html#occasional" target="work-iframe">OCCASIONAL SYMPHONY</a>

    <a href="work.html#type" target="work-iframe">TYPE & LOGOS</a>

    <a href="work.html#nextwave" target="work-iframe">NEXT WAVE FESTIVAL</a>

    <a href="work.html#illustration" target="work-iframe">ILLUSTRATIONS</a>

    <a href="work.html#stationnorth" target="work-iframe">STATION NORTH</a>
</nav>

想法?

4

1 回答 1

0

由于您使用的是纯 JavaScript 而没有库,因此我将解释如何去做而不是使用代码(因为它只是众多解决方案中的一种)。

您可能希望将您的 JS 移至 window.load 函数,除非您总是希望您的网站访问者使用 JavaScript。

隐藏除一个以外的所有 iframe(第一个?无论您选择什么作为默认 iframe)。

将事件处理程序(可能是 onclick)添加到您的导航超链接以执行一些操作:1. 切换与特定导航项相关的可见性(并隐藏当前可见)iframe,如有必要(取决于单击了哪个) 2. 检测使用(伪代码)iframe.ELEMENT.offsetTop 从 iframe 的特定锚点偏移到 iframe 页面的顶部,以便使用... 3. ... iframe.ELEMENT.scrollTo(value_determined_in_step_2)

相信这将适用于您所描述的特定用例。

于 2013-06-16T02:44:57.213 回答