Getting an error while loading the dashboard embedurl in iframe.

Hi,

I am trying to display power bi dashboard in my web app by its embedUrl using power bi API service. But i am getting an error as shown below.



Below are the api method and javascript code used to get the dashboard list & load the embed url to iframe:

API method to get all dashboard details : https://api.powerbi.com/beta/myorg/dashboards which gives the output as 

"value":[{"id":"2C0CCF12-A369-4985-A643-0995C249D5B9","displayName":"Music",
      "isReadOnly":"false",
      "embedUrl":"https://app.powerbi.com/dashboardEmbed?dashboardId=bbce58ae-d007-428a-b3ea-c092ea04dfcb"},{"id":"C446840B-94AD-4B23-8896-C276E69B8FAA","displayName":"SalesMarketing",
      "isReadOnly":"false",
      "embedUrl":"https://app.powerbi.com/dashboardEmbed?dashboardId=bbce58ae-d007-428a-b3ea-c092ea04dfcb"}]

JavaScript code load embed url to iframe:

// dashboards (variable) is an array of string which contains embedUrl.
window.onload = function () {
if ("" != accessToken) {
var iframe = document.getElementById('iFrameDashboard');

// To load a tile do the following:
// Set the IFrame source to the EmbedUrl from the Get Tiles operation
iframe.src=dashboards[0].embedURL;

// Add an onload handler to submit the access token
iframe.onload = postActionLoadTile;
}
};

function postActionLoadTile() {

// Construct the push message structure
// This is where you assign the Access Token to get access to the tile visual
var messageStructure = {
action: "loadDashboard",
accessToken: accessToken,
height: 500,
width: 500
};
message = JSON.stringify(messageStructure);

// Push the message
document.getElementById('iFrameDashboard').contentWindow.postMessage(message, "*");;
}

On my web page its appearing as below



Please help me out in resolving above mentioned issue.