如何访问iframe中的div属性（发生点击事件）？

Question

下面是我的代码。

在这里，每当我单击song1时，我都需要获取相应的ID和属性。

<div>
    <iframe id="songs" src="song.html">
        <div id="song1" class="sngs" name="song123">song1</div>
        <div id="song2" class="sngs" name="song122">song2</div>
        <div id="song3" class="sngs" name="song121">song3</div>
    </iframe>
</div>

这就是我在这里所做的：

$(document).ready(function(){
    $("iframe").click(function(){
        var currentsongName=$("iframe").contents().find("#"+this.id).getAttribute("name");
        console.log(currentsongName);
       playsong(currentsongName);
    });
});

但是这里this.id还有其他东西。 那么如何获取单击的div的ID及其属性？

Answer 1

通过使用索引检索本机元素

var currentsongName=$("iframe").contents().find("#"+this.id)[0].getAttribute("name");

或使用等同于attr() jQuery

var currentsongName=$("iframe").contents().find("#"+this.id).attr("name");

Answer 2

您必须确保iframe在与托管jQuery脚本（容器）相同的服务器和端口上显示某些内容，然后才能通过其文档对象访问iframe：

$($('iframe')[0].document, 'div.sngs').click(function(){
  console.log($(this).html());
});

Answer 3

您没有名称TAG ...添加它或使用id代替。

$('iframe div.sngs').click(function(){
     console.log($(this).attr("id"));
     //now play song with id... 
});