Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
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>
PowerBI embedded API has changed recently so the tutorial is possibly out of date.
somewhat related: SO question
More specificaly, more up-to-date tutorial
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
14 | |
2 | |
2 | |
1 | |
1 |