我如何在iframe中定位div？ [英] How can I target a div inside an iframe?

问题描述

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




$ * *
< div id =activateclass =activate>
< / iframe>
< a href =＃activatetarget =iframe>连结< / a>


我认为这可行，但显然没有做任何事情，因为我很笨。任何想法？ / p>



  .......很多内容.... 
< div id =activate> ;内部框架< / div> 
  

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



 < iframe src =test.htmlname =target-iframe><<< ; / iframe的> 
< a href =test.html＃activate
 target =target-iframe
 onclick =frames ['target-iframe']。document.getElementById（'activate' ）
 .scrollIntoView（）; return false>点击< / a> 
 ^这就是链接。我已经将代码分成了多行代码：
  





说明

• 该框架的 名称 attrbute ，其值 target



• 这个链接包含三个属性，每个属性支持两种滚动到链接的方法框架：
  
  

  
  
  1. target =target-iframe and href =test.html＃activate
     
     这是后备方法，用于发生错误或者用户禁用了JavaScript。 >
     链接的目标是框架， href 属性必须是框架，通过锚点后缀，例如 test.hrml＃activate 。此方法会导致框架页面重新加载。另外，如果锚点已经位于 #activate ，此方法将不再起作用。 这是一个优雅的解决方案，它shold不会失败。通过全局框架对象（通过名称，而不是通过id， target-iframe ）访问所需的框架。然后，选择锚点（ document.getElementById（'activate'））。
     最后， scrollIntoView 方法用于移动视口内的元素。 />
     onclick 方法以返回false 结束，以便默认行为（即在链接之后，导致页面刷新），不会发生。
  
  

由于缺少名称属性（ target =... 不能与ID匹配，只有名称）。 #activate 在当前页面的上下文中被解析，所以链接指向 page-containing-frame.html 。

I have an element inside an <iframe> I'd like to activate using a link outside the <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?

解决方案

Framed page (test.html):

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

Page containing the frame (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 name attrbute with 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 href attribute must be 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 frames object (by name, NOT by id, target-iframe). Then, the anchor is selected (document.getElementById('activate').
     Finally, the scrollIntoView method is used to move the element inside the viewport.
     The onclick method ends with return false, so that the default behaviour (ie following the link, causing a page refresh), does not happen.

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

这篇关于我如何在iframe中定位div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！