Power BI Publish to Web Iframe stealing focus


Just had a developer contact me about my Publish to Web Post and that the Power BI embed code was stealing the focus whenever they loaded the page.

So I played with it and was about type the age old reply:

 

“Works Fine On My Computer”

Realizing i had never started an HTML page from scratch and embedded a Power BI report into it, decided today was the day!  So i opened Visual Studio created a new HTML page and dropped in the the embed code below…and son of a gun if i didn’t immediately see the Power BI report stealing the focus!

<‘iframe width=”800″ height=”600″ src=”https://app.powerbi.com/view?r=eyJrIjoiM2I0YWMxMTItYjdmMC00Y2EzLWFkODEtZDY0OTM5NDM5YWU1IiwidCI6IjA4YTBiODI0LTU2ZjktNDk4My1hYzhhLTNmZDM3M2Y2ODQ2NiIsImMiOjF9″frameborder=”0″ allowFullScreen=”true”></iframe>

After playing with it for a while i realized the difference was i had been using Chrome for the initial blog post and repo…but Visual Studio defaults to Internet Explorer and they handle iFrames differently!!!!!!

Ended up i had to put the focus back to wherever i want it in the Onfocus event of the Iframe and test to see if this was the initial load so could still click into  the Power BI Report to see the records or take the report to full screen mode.

Now it should work on every bodies computer!

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var initialFocus = false;
</script>

   <title>Iframe stealing sample</title>
</head>

<body>

<form action="" onsubmit="return false">
<p><input type="text" id="Textinput" /></p>
<p><input type="text" id="Textinput1" /></p>
<p><input type="text" id="Textinput2" /></p>
<p><input type="text" id="Textinput3" /></p>
<p><input type="text" id="Textinput4" /></p>
<p><input type="text" id="Textinput5" /></p>
<p><input type="text" id="Textinput6" /></p>
<p><input type="text" id="Textinput7" /></p>
<p><input type="text" id="Textinput8" /></p>
<p><input type="text" id="Textinput9" /></p>
<p><input type="text" id="Textinput0" /></p>
<p><input type="text" id="Textinput11" /></p>
<p><input type="text" id="Textinput12" /></p>
<p><input type="text" id="Textinput13" /></p>
<p><input type="text" id="Textinput14" /></p>
<p><input type="text" id="Textinput15" /></p>
<p><input type="text" id="Textinput16" /></p>
<p><input type="text" id="Textinput17" /></p>
<p><input type="text" id="Textinput18" /></p>
<p><input type="text" id="Textinput19" /></p>
<p><input type="text" id="Textinput20" /></p>
<p><input type="text" id="Textinput21" /></p>
<p><input type="text" id="Textinput22" /></p>
<p><input type="text" id="Textinput23" /></p>

<iframe width="800" height="600" onfocus="if (initialFocus==false) {document.getElementById('Textinput').focus(); initialFocus = true; }"
src="https://app.powerbi.com/view?r=eyJrIjoiM2I0YWMxMTItYjdmMC00Y2EzLWFkODEtZDY0OTM5NDM5YWU1IiwidCI6IjA4YTBiODI0LTU2ZjktNDk4My1hYzhhLTNmZDM3M2Y2ODQ2NiIsImMiOjF9" frameborder="0" allowFullScreen="true"></iframe>

</form>
</body>
</html>


Comments (0)

Skip to main content