Html 如何定位 iframe 内的 div？

How can I target a div inside an iframe?

提问by Sativa Diva

I have an element inside an <iframe>I'd like to activate using a link outside the <iframe>.

我有一个元素，<iframe>我想使用<iframe>.

Example:

例子：

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

I thought this would work but obviously does nothing because I'm stupid. Any ideas?

我认为这会奏效，但显然什么也没做，因为我很愚蠢。有任何想法吗？

回答by Rob W

Framed page (test.html):

框架页 ( test.html):

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

Page containing the frame (page-containing-frame.html):

包含框架 ( 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

Explanation

解释

• The frame has a nameattrbutewith the value of target-iframe(obviously, you can choose any desired value).

• The link contains three attributes, each supporting two methods to scroll to a link in the frame:

  1. target="target-iframe"and href="test.html#activate"
     This is the fallback method, in case of an error occurs, or if the user has disabled JavaScript.
     The target of the link is the frame, the hrefattribute mustbe the path of the frame, postfixed by the anchor, eg test.hrml#activate. This method will cause the framed page to reload. Also, if the anchor is already at #activate, this method will not work any more.
  2. This is the elegant solution, which shold not fail. The desired frame is accessed through the global framesobject (by name, NOT by id, target-iframe). Then, the anchor is selected (document.getElementById('activate').
     Finally, the scrollIntoViewmethod is used to move the element inside the viewport.
     The onclickmethod ends with return false, so that the default behaviour (ie following the link, causing a page refresh), does not happen.

• 该框架具有值为 的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，因此不会发生默认行为（即跟随链接，导致页面刷新）。

Your current code did not work, because of the missing nameattribute (target="..."cannot match IDs, only names). Also, #activateis parsed in the context of the current page, so, the link points to page-containing-frame.html.

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