logo标签列表

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

htmliframeanchor
3
我一直在搜索，但是我对此完全不知所措：我有一个index.html页面，其中包含几个100%宽度和高度重叠的iframe。该索引具有具有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>

有什么想法吗？

1
你一直在搜索链接到iframe中锚点的方法吗？ - Brainfeeder
只是一个提醒：你的<nav>链接都有href="work.html#somelink"，但是你的<iframe>却有src="work1.html" - 注意多了个1。 - ASGM
1个回答
0

由于您使用的是纯JavaScript而没有使用库，因此我将解释一下如何实现它而不是使用代码（因为这只是众多可能解决方案之一）。

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

隐藏所有iframe，除了一个（第一个？您选择的默认iframe）。

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接