Join us at FabCon Atlanta from March 16 - 20, 2026, for the ultimate Fabric, Power BI, AI and SQL community-led event. Save $200 with code FABCOMM.
Register now!The Power BI Data Visualization World Championships is back! Get ahead of the game and start preparing now! Learn more
i have Report object which i generated using api Controller in my web app and using the below provided code i am setting properties for my iframe
APIService.GetPowerBIReports().then(function (response) {
$scope.reportNames = response;
$scope.reportDetails = response.split("~");
console.log("call backed...");
console.log("$scope.reportDetails[3]");
var m = {
action: "loadReport",
accessToken: $scope.reportDetails[4].stringify
};
message = JSON.stringify(m);
var iframe = document.getElementById('iFrameEmbedReport');
// push the message.
console.log($scope.reportDetails[3]+" " + $scope.reportDetails[4]);
iframe.src=$scope.reportDetails[3];
iframe.contentWindow.postMessage(message, "*");
});
but after all this when i try to load iframe on my html page the api doesnt rply anything
@gargabhay10 wrote:
i have Report object which i generated using api Controller in my web app and using the below provided code i am setting properties for my iframe
APIService.GetPowerBIReports().then(function (response) {
$scope.reportNames = response;
$scope.reportDetails = response.split("~");console.log("call backed...");
console.log("$scope.reportDetails[3]");
var m = {
action: "loadReport",
accessToken: $scope.reportDetails[4].stringify
};
message = JSON.stringify(m);var iframe = document.getElementById('iFrameEmbedReport');
// push the message.
console.log($scope.reportDetails[3]+" " + $scope.reportDetails[4]);
iframe.src=$scope.reportDetails[3];
iframe.contentWindow.postMessage(message, "*");
});
but after all this when i try to load iframe on my html page the api doesnt rply anything
I'd suggest you use the Power BI Javascript API to embed. See a demo below,
<html>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript">
window.onload = function () {
var embedConfiguration = {
type: 'report',
accessToken: 'eyJ0eX...yourtokenhere',
embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=b7441d21-dabb-4d81-89b6-0c7c5bd6426d',
settings: {
filterPaneEnabled: true,
navContentPaneEnabled:true
}
};
var $reportContainer = $('#reportContainer');
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
report.on('loaded', event => {
console.log(report);
});
}
</script>
<div id="reportContainer"></div>
</html>
The Power BI Data Visualization World Championships is back! Get ahead of the game and start preparing now!
| User | Count |
|---|---|
| 3 | |
| 2 | |
| 2 | |
| 1 | |
| 1 |
| User | Count |
|---|---|
| 7 | |
| 4 | |
| 4 | |
| 4 | |
| 4 |