Question

我一直在搜索和搜索，但我对此非常感到困惑：我有一个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>

想法？

Answer 1

由于你使用的是纯JavaScript而没有库，我只是要解释你如何去做而不是使用代码（因为它只是一个可能的解决方案）。

您可能希望将JS移动到window.load函数，除非您始终希望您的网站访问者使用JavaScript。

隐藏除了一个之外的所有iframe（第一个？你选择哪个iframe作为默认iframe）。

将事件处理程序（可能是onclick）添加到导航超链接以执行以下操作： 1.如果需要，切换与特定导航项相关的可见性（并隐藏当前可见的）iframe（取决于单击哪个） 2.使用（伪代码）iframe.ELEMENT.offsetTop检测iframe特定锚点到iframe页面顶部的偏移量，以便使用... 3. ... iframe.ELEMENT.scrollTo（value_determined_in_step_2）

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

将父页面链接链接到iframe中的锚点

1 个答案: