如何訪問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... 
});