Domo Iframe dynamic height code not working

Vishal
Vishal Member
in APIs & Domo Developer

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

Answers

  • ArborRose
    ArborRose Coach

    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?

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • Vishal
    Vishal Member
    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
    Vishal Member

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

  • ArborRose
    ArborRose Coach

    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>

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • Vishal
    Vishal Member
    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
    Alka Member

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

    sendHeightToParent()?

Categories