Domo Iframe dynamic height code not working

Vishal

I am trying to give dynamic height for domo iframe in the .NET project. but the code is not working.

Please check below code

<iframe id="domoFrame" src="https://<your-domo-content-url>" scrolling="no"></iframe><script>
// Function to dynamically resize iframe based on content
function resizeIframe() {
var iframe = document.getElementById('domoFrame');
try {
var iframeContent = iframe.contentWindow.document.documentElement;
var newHeight = iframeContent.scrollHeight;
iframe.style.height = newHeight + 'px';
} catch (error) {
console.log('Error accessing iframe content. Ensure the iframe allows cross-origin communication.');
}
}

// Add event listener to trigger resizing once iframe loads
document.getElementById('domoFrame').onload = function() {
resizeIframe();
};

// Optionally listen for further content changes inside iframe
setInterval(resizeIframe, 1000); // Adjust the interval as needed
</script>

https://developer.domo.com/portal/nt3co7oh36g5s-dynamic-iframe-height

ArborRose

Looks like your code is attempting to access an iframe from outside Domo's iframe. In other words, the source of the iframe is from a different domain than Domo.

<iframe id="domoFrame" src="https://<domo-url>?autoresize=true" width="100%" height="100%" scrolling="no"></iframe>

Can you do the sizing in the iframe statement using something like this code?

Vishal

https://community-forums.domo.com/main/discussion/comment/98443#Comment_98443

Yes i need to change the size of iframe using the above code.

Vishal

Any other way to set dynamic height of the domo iframe base on the inner content?

ArborRose

Maybe, if you can calculate the content height. But there may be security reasons where Domo parent page and iframe are not allowed to communicate.

See if this gives you something to work with:

<script>

  function sendHeightToParent() {

    var height = document.body.scrollHeight;

    window.parent.postMessage({ frameHeight: height }, '*');

  }


  window.onload = sendHeightToParent;

  window.onresize = sendHeightToParent;

</script>

On the parent page:

<script>

  window.addEventListener('message', function(event) {

    if (event.data.frameHeight) {

      var iframe = document.getElementById('yourIframeId');

      iframe.style.height = event.data.frameHeight + 'px';

    }

  });

</script>

Vishal

https://community-forums.domo.com/main/discussion/comment/98559#Comment_98559

@ArborRose The suggested code not working with domo iframe url because the html code and domo iframe is different have different domain.

Alka

If we are using DOMO APPS where can we write the JavaScript function

sendHeightToParent()?