Question

我在页面内部有一个iframe，src设置为同一本地计算机上的文件（不是跨域）。

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

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

iframe内部有一些内容

    <html>
    <head/>
     <body>
      <li>
        <ul>stuff</ul>
      </li>
     </body>
    </html>

我的问题是，我有一个变量（在我的索引页面中）当前指向iframe内部的元素var element = <ul>stuff</ul>。

从这个变量我希望能够访问父iframe并获取id'something'。

我一直在尝试一些使用find而没有运气的jquery

$(element).find('iframe')

而且我想知道我哪里出错了...我已经搜索了其他解决方案，但它们都与iframe之外的内容有关，我想我在里面看着！是否有其他人可以帮助解决一些问题？

Answer 1

首先，如果要访问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')

Answer 2

似乎很难找到iframe元素的id而没有名称之类的东西。

但是假设你知道iframe（“somepage.html”）中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>

编辑：正如Serjio所见，如果您不知道html文件的名称，可以使用location.href。

iframe：从iframe内的子元素访问父级

2 个答案: