Advance your Data & AI career with 50 days of live learning, dataviz contests, hands-on challenges, study groups & certifications and more!
Get registeredJoin 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.
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>
Join the Fabric FabCon Global Hackathon—running virtually through Nov 3. Open to all skill levels. $10,000 in prizes!
Check out the October 2025 Power BI update to learn about new features.