We're developing a solution that requires us to put an embedded report on our pages using Power BI REST API.
The problem that we have at the moment is that there's something wrong with the iframe JS code but we have no idea if it's something caused by us or simply a bug.
In order to embed the report we followed this article: https://azure.microsoft.com/en-us/documentation/articles/power-bi-embedded-iframe/.
Once we the page loads we receive the following error coming from the Power BI iframe (which is stuck on a fading logo animation):
Invalid message data:jsCommon is not defined
Inspecting the code inside the iframe we found the line that is causing the issue:
// Handle message from parent window
function receiveMessage(event) {
if (event.data) {
try {
// This is the line that causes the exception.
var messageData = jsCommon.JsonExtensions.isJsonString(event.data) ? JSON.parse(event.data) : event.data;
This instead is how we prepare the iframe:
<iframe id="reportIframe" src="{{ $powerBIReports['value'][0]['embedUrl'] }}"></iframe>
<script>
$(document).ready(function()
{
var iframeReportElement = document.getElementById('reportIframe').contentWindow;
var msg = {
action: "loadReport",
accessToken: "{{ $JWT }}",
height: 500,
width: 722
};
var msgTxt = JSON.stringify(msg);
iframeReportElement.postMessage(msgTxt, '*');
window.addEventListener('message', function (event)
{
console.error('PowerBI embedded error: ' + JSON.parse(event.data).error);
});
});
</script>
