Question

我在<iframe>中有一个元素我想使用<iframe>之外的链接激活。

示例：

<iframe src="iframe.html" id="iframe">
    *inside the iframe*  
    <div id="activate" class="activate">
</iframe>
<a href="#activate" target="iframe">Link</a>

我认为这会起作用，但显然什么也没做，因为我很蠢。有什么想法吗？

Answer 1

加框页面（test.html）：

....... lots of content .... 
<div id="activate">Inside frame</div>

包含框架（page-containing-frame.html）的网页：

<iframe src="test.html" name="target-iframe"></iframe>
<a href="test.html#activate"
       target="target-iframe"
       onclick="frames['target-iframe'].document.getElementById('activate')
                .scrollIntoView();return false">Click</a>
^ That's the link. I've split up code over multiple lines for visibility

说明

该框架的 name属性，其值为target-iframe（显然，您可以选择任何所需的值）。
该链接包含三个属性，每个属性支持两种滚动到框架中链接的方法：
1. target="target-iframe"和href="test.html#activate"
  这是回退方法，如果发生错误，或者用户已禁用JavaScript 链接的目标是框架， href 属性必须是框架的路径，后缀为锚点，例如test.hrml#activate。此方法将使框架页面重新加载。此外，如果锚点已经在#activate，则此方法将不再有效。
2. 这是优雅的解决方案，不会失败。通过全局frames对象（按名称，不按id，target-iframe）访问所需的帧。然后，选择锚点（document.getElementById('activate') 最后，scrollIntoView方法用于在视口内移动元素 onclick方法以return false结尾，因此默认行为（即链接之后，导致页面刷新）不会发生。

您当前的代码无效，因为缺少name属性（target="..."无法匹配ID，只能匹配名称）。此外，#activate在当前页面的上下文中进行解析，因此，链接指向page-containing-frame.html。

如何在iframe中定位div？

1 个答案:

说明