how to access input element in parent from inside iframe in sharepoint

Question

I have the following jquery code and I have inserted it in an html page where I call it inside an iframe in a SharePoint page. I am using this line of code to get the id from the control in the parent page

var id = $('#prodId', window.parent.document).val()

but it is not working.

Any idea how to access objects in the parent page from within iframe?

  function formatItem(item) {
      return item.Name + ': $' + item.Price;
  }

  function find() {
      //var id = $('#prodId').val();
      var id = $('#prodId', window.parent.document).val()
      $.getJSON(uri + '/' + id)
          .done(function(data) {
              alert(formatItem(data));
              $('#product').text(formatItem(data));
          })
          .fail(function(jqXHR, textStatus, err) {
              alert(err);
              $('#product').text('Error: ' + err);
          });
  }

Answer 1

Where is the page for the iFrame hosted? If you're in an app or in another domain, it won't work, check out

Answer 2

If it is in a different domain there are options (CORS) msdn blog