accessing parent contents from inside iframe(on the same server machine) jquery working in firefox and IE but not in chrome

0
votes

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');

});
1
javascriptjqueryhtmlcssiframe

1 Answers

0
votes

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();