javascript - iframe 中的 Jplayer 控件

Question

编辑

我的问题不够精确，所以有一个很大的修改。

我正在尝试从 iframe 控制 jPlayer(播放、暂停、添加到播放列表...)。

jQuery 函数位于父窗口上，如下所示:

player.js

$(document).ready(function(){
    var myPlaylist = new jPlayerPlaylist({

    jPlayer: "#jplayer_N",
    cssSelectorAncestor: "#jp_container_N"
    }, [
    // PLAYLIST HERE
], {
playlistOptions: {
  enableRemoveControls: true,
  autoPlay: true
},
swfPath: "js/jPlayer",
supplied: "mp3",
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: false
});

  $(document).on($.jPlayer.event.pause, myPlaylist.cssSelector.jPlayer,  function(){
    $('.musicbar').removeClass('animate');
    $('.jp-play-me').removeClass('active');
    $('.jp-play-me').parent('li').removeClass('active');
  });

 $(document).on($.jPlayer.event.play, myPlaylist.cssSelector.jPlayer,  function(){
 $('.musicbar').addClass('animate');
 });

$(document).on('click', '.jp-play-me', function(e){
  e && e.preventDefault();
  var $this = $(e.target);
  if (!$this.is('a')) $this = $this.closest('a');

  $('.jp-play-me').not($this).removeClass('active');
  $('.jp-play-me').parent('li').not($this.parent('li')).removeClass('active');

  $this.toggleClass('active');
  $this.parent('li').toggleClass('active');
  if( !$this.hasClass('active') ){
    myPlaylist.pause();
  }else{
    var i = Math.floor(Math.random() * (1 + 7 - 1));
    myPlaylist.play(i);
  }
  });

$(".song").click(function(event) {
  event.preventDefault();
  $("#jplayer_N").jPlayer("setMedia", 
  { 
    title:$(this).attr("data-title"),
    artist:$(this).attr("data-art"),
    mp3: $(this).attr("data-mp3"),
  })
  .jPlayer("play");
});

$(".addSong").click(function(event) {
  event.preventDefault();
  myPlaylist.add({
    title:$(this).attr("data-title"),
    artist:$(this).attr("data-art"),
    mp3:$(this).attr("data-mp3"),
    playNow:true
  })
  myPlaylist.play();
  });
});

Iframe HTML 代码

我的 iframe 中的 HTML 代码包含我想要发送到父窗口的数据。例如:

<div class="padder-v">
    <a href="#" class="song" data-mp3="some_data" data-title="other_data" data-art="another_data>Song Title</a>
    <a href="#" class="addSong" data-mp3="some_data" data-title="other_data" data-art="another_data>Song Title</a>
</div>

所以我需要做的是使用 iframe 中的数据调用父窗口中的 jquery 函数。

Answer 1

这是我根据一些现有代码整理而成的演示，我发现修改它以使用 iframe。

• Demo
• Source

其要点是为窗口对象分配一个带有时间戳的 ID，如下所示:

var thisWindowID = (new Date()).getTime()

并将该窗口 ID 放入 JSON 字符串中以便稍后解析，同时向所有窗口广播 localStorage 项的状态(事件或非事件)。