从iframe内部（在同一台服务器上）访问父级内容，但在Firefox和IE中却无法在chrome中使用

Question

I am developing a music site , site contains a parent page with an iframe and a player. when menu is click the src of iframe is change depending on menu item clicked.In one page iframe contains music items. When a music is clicked inside iframe, i want to add that music in the playlist(contains in the parent). My jQuery code is working in Firefox and Internet Explorer but in chrome. it gives an error below..

Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match. ...

here is my code

$('span[name=add]').click(function(){

    var song = $(this).attr("song");
    var cover = $(this).attr("cover");
    var artist = $(this).attr("artist");
    window.parent.$('#playlist').prepend('<li song="'+song+'" cover="'+cover+'"artist="'+artist+'">'+song+'</li>');
    window.parent.$('#playlist').trigger('change');

});

Answer 1

Pretty sure this is to stop phishing.

I haven't done this to manipulate DOM before, but when I bumped into this error, I found that this pattern worked.

1. Create function in parent window.
2. Call function from iframe.

Haven't tested this exact code, just for example.

Parent

window.newHtml = "";
window.setHtml = function() {
    $('#someElement').html(window.newHtml);
};

Iframe

newHtml = "<p>yo!</p>";
setHtml();