Javascript iframes：从iframe中的子元素访问父元素_Javascript

Javascript iframes：从iframe中的子元素访问父元素

javascript

Javascript iframes：从iframe中的子元素访问父元素,javascript,Javascript,我在一个页面中有一个Iframe，它将src设置为同一台本地计算机（而不是跨域）上的文件所以我有一个页面看起来像这样： <html> <head/> <body><iframe id="something" src="somepage.html"/></body> </html> 我想知道我哪里做错了。。。我在谷歌上搜索过其他的解决方案，但它们都与在iframe之外向内看有关，我想我是在里面向外看！是否还有其他人可以

我在一个页面中有一个Iframe，它将src设置为同一台本地计算机（而不是跨域）上的文件

所以我有一个页面看起来像这样：

<html>
 <head/>
 <body><iframe id="something" src="somepage.html"/></body>
</html>

我想知道我哪里做错了。。。我在谷歌上搜索过其他的解决方案，但它们都与在iframe之外向内看有关，我想我是在里面向外看！是否还有其他人可以帮助我们了解一些情况？

首先，如果您想访问iframe中的某些数据，最好为iframe设置名称。之后，要访问iframe的DOM，可以使用：

$('ul', window.frames['iframe_name'].document);

访问全局变量的步骤

alert(window.frames['iframe_name'].some_global_var_or_function_of_iframe)

如果要在iframe中获取某些父数据：

$('selector', parent.document) // for DOM
alert(parent.some_global_var_or_function_of_parent_window)

编辑因此，在您的情况下，只需使用：

$('iframe', parent.document).filter(function(iframe){
    // you can compare iframes like this
    return iframe.getAttribute('src') == location.href
}).attr('id')

如果没有类似于iframe元素名称的内容，似乎很难找到iframe元素的id

但是，假设您知道iframe中html文件的名称（“somepage.html”），这似乎很自然，那么您可以这样做来获取父文档中包含iframe的元素：

var $matching = $(parent.document).find('iframe').filter(function(){
    var srcTokens = this.src.split('/');
    return srcTokens[srcTokens.length-1]=='somepage.html';
});

下面是我用来测试的“somepage.html”文件，将id记录在控制台中：

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        </head>
     <body>
      <li>
        <ul>stuff</ul>
      </li>
      <script>
          var $matching = $(parent.document).find('iframe').filter(function(){
              var srcTokens = this.src.split('/');
              return srcTokens[srcTokens.length-1]=='somepage.html';
          });
          console.log($matching.attr('id'));
          </script>
     </body>
    </html>



东西

var$matching=$（parent.document）.find（'iframe'）.filter（function（））{
var srcTokens=this.src.split（'/'）；
返回srcTokens[srcTokens.length-1]=='somepage.html'；
});
log（$matching.attr（'id'））；

编辑：正如Serjio所看到的，如果您不知道html文件的名称，可以使用

location.href

。

您的问题让我感到困惑，可以澄清吗？在这个“解决方案”中，您只能在已经知道（或知道名称）的情况下才能找到id。我不认为这是必需的。嗨，Serjio，谢谢你的输入，但我认为这是错误的答案，我必须知道我的iframe的名称，当我从iframe内部的元素中想问我的包含iframe的名称是什么时，这是否更有意义？@John check EDIT section。这个代码

$（element）.find（'iframe'）

是完全错误的，因为我从您的question@dystroy我描述了窗口和框架之间的变量/DOM关系（所以我可以写下，你参与了我的解决方案的一部分，但这很可笑；嘿，伙计，我们不是孩子）。我改进了你的解决方案。在你的回答中，还有一些奇怪的变量

$iframes

，在任何地方都没有使用过。@Serjio The

location.href

use是一个值得添加的变量。但是当你复制（即使添加）时在给出了一些明显错误的答案后，最好提一下。

var $matching = $(parent.document).find('iframe').filter(function(){
    var srcTokens = this.src.split('/');
    return srcTokens[srcTokens.length-1]=='somepage.html';
});

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        </head>
     <body>
      <li>
        <ul>stuff</ul>
      </li>
      <script>
          var $matching = $(parent.document).find('iframe').filter(function(){
              var srcTokens = this.src.split('/');
              return srcTokens[srcTokens.length-1]=='somepage.html';
          });
          console.log($matching.attr('id'));
          </script>
     </body>
    </html>