Domo Iframe dynamic height code not working
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>
Answers
-
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! **0 -
Yes i need to change the size of iframe using the above code.
0 -
Any other way to set dynamic height of the domo iframe base on the inner content?
0 -
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! **0 -
@ArborRose The suggested code not working with domo iframe url because the html code and domo iframe is different have different domain.
0 -
If we are using DOMO APPS where can we write the JavaScript function
sendHeightToParent()?
0
Categories
- All Categories
- 1.7K Product Ideas
- 1.7K Ideas Exchange
- 1.5K Connect
- 1.2K Connectors
- 295 Workbench
- 6 Cloud Amplifier
- 8 Federated
- 2.8K Transform
- 97 SQL DataFlows
- 608 Datasets
- 2.1K Magic ETL
- 3.8K Visualize
- 2.5K Charting
- 712 Beast Mode
- 50 App Studio
- 39 Variables
- 668 Automate
- 170 Apps
- 446 APIs & Domo Developer
- 45 Workflows
- 7 DomoAI
- 34 Predict
- 14 Jupyter Workspaces
- 20 R & Python Tiles
- 391 Distribute
- 111 Domo Everywhere
- 274 Scheduled Reports
- 6 Software Integrations
- 116 Manage
- 113 Governance & Security
- Domo Community Gallery
- 31 Product Releases
- 9 Domo University
- 5.3K Community Forums
- 40 Getting Started
- 30 Community Member Introductions
- 104 Community Announcements
- 4.8K Archive