Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
Anonymous
Not applicable

Power BI Embedded Stealing Focus

Hi,

 

I have embedded a Power BI report at the bottom of a web page. It was all good unitl recently when the Power BI embedded frame started stealing the focus.

 

I didn't have any issue before and it only started happening in the last few days.

 

My search for solution brought me to a page where funnily the problem is replicated. If you visit that page https://blogs.msdn.microsoft.com/charles_sterling/2017/02/07/power-bi-publish-to-web-iframe-stealing... you'll notice that the page auto scrolls to embedded Power BI report once the page load is complete.

 

Can any one please tell me why this might be happening and what I can do to resolve this.

 

 

1 ACCEPTED SOLUTION
Eric_Zhang
Microsoft Employee
Microsoft Employee


@Anonymous wrote:

Hi,

 

I have embedded a Power BI report at the bottom of a web page. It was all good unitl recently when the Power BI embedded frame started stealing the focus.

 

I didn't have any issue before and it only started happening in the last few days.

 

My search for solution brought me to a page where funnily the problem is replicated. If you visit that page https://blogs.msdn.microsoft.com/charles_sterling/2017/02/07/power-bi-publish-to-web-iframe-stealing-focus/ you'll notice that the page auto scrolls to embedded Power BI report once the page load is complete.

 

Can any one please tell me why this might be happening and what I can do to resolve this.

 

 


@Anonymous

Based on my research, there's no elegant solution for preventing the stealing focus. You can try the workaround in that link or my workaround as below. I hide the iframe when loading the page and after 2 seconds(2 seconds usually is enough to bypass the iframe focus event phrase) let it show.

<html>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 

<script type="text/javascript">   

window.onload = function () { 

$("#embedIframe").hide();


<!-- put other line heres--> 


var delayMillis = 2000; //2 second

setTimeout(function() { 

$("#embedIframe").show();
   
}, delayMillis);
}
 
 
</script> 
<p> Good day</p>  
</br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br> 

<iframe id="embedIframe" width="800" height="600"   

src="https://app.powerbi.com/view?r=eyJrIjoiM2I0YWMxMTItYjdmMC00Y2EzLWFkODEtZDY0OTM5NDM5YWU1IiwidCI6IjA4YTBiODI0LTU2ZjktNDk4My1hYzhhLTNmZDM3M2Y2ODQ2NiIsImMiOjF9" frameborder="0" allowFullScreen="true"></iframe> 

</html>  

View solution in original post

3 REPLIES 3
Eric_Zhang
Microsoft Employee
Microsoft Employee


@Anonymous wrote:

Hi,

 

I have embedded a Power BI report at the bottom of a web page. It was all good unitl recently when the Power BI embedded frame started stealing the focus.

 

I didn't have any issue before and it only started happening in the last few days.

 

My search for solution brought me to a page where funnily the problem is replicated. If you visit that page https://blogs.msdn.microsoft.com/charles_sterling/2017/02/07/power-bi-publish-to-web-iframe-stealing-focus/ you'll notice that the page auto scrolls to embedded Power BI report once the page load is complete.

 

Can any one please tell me why this might be happening and what I can do to resolve this.

 

 


@Anonymous

Based on my research, there's no elegant solution for preventing the stealing focus. You can try the workaround in that link or my workaround as below. I hide the iframe when loading the page and after 2 seconds(2 seconds usually is enough to bypass the iframe focus event phrase) let it show.

<html>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 

<script type="text/javascript">   

window.onload = function () { 

$("#embedIframe").hide();


<!-- put other line heres--> 


var delayMillis = 2000; //2 second

setTimeout(function() { 

$("#embedIframe").show();
   
}, delayMillis);
}
 
 
</script> 
<p> Good day</p>  
</br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br> 

<iframe id="embedIframe" width="800" height="600"   

src="https://app.powerbi.com/view?r=eyJrIjoiM2I0YWMxMTItYjdmMC00Y2EzLWFkODEtZDY0OTM5NDM5YWU1IiwidCI6IjA4YTBiODI0LTU2ZjktNDk4My1hYzhhLTNmZDM3M2Y2ODQ2NiIsImMiOjF9" frameborder="0" allowFullScreen="true"></iframe> 

</html>  

This is one of the option. But anyone can get the url using view the page source. I just try your answer. I can get the power BI URL. Is there any other options?.

Anonymous
Not applicable

@Eric_Zhang Thanks for sharing the solution, works like charm. I'll share this with my web developers.

 

We didn't have this problem until only a few days back. Any reason why this might be happening now and not earlier?

 

Thanks again

Helpful resources

Announcements
July 2024 Power BI Update

Power BI Monthly Update - July 2024

Check out the July 2024 Power BI update to learn about new features.