I’m trying to resize an embedded iframe as mentioned on the Metabase documentation https://www.metabase.com/docs/latest/administration-guide/13-embedding.html. After trying for several hours, I’m still unable to get it working. I tried embedding my own iframe served from my own page and the resizing works beautifully.
Also I tried all the options for ‘heightCalculationMethod’ without any luck.
My guess is that my Metabase instance is not serving the “resize” script that it’s supposed to serve in the iframe to support communicating using PostMessage.
Does anyone have an idea about why it might be happening?
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.2/iframeResizer.min.js" charset="utf-8"></script>
<!-- Dashboard that I'm trying to embed -->
<iframe src="<%= @iframe_url %>" id="metabaseIframe" onload="iFrameResize({ log: true, warningTimeout: 1000000, heightCalculationMethod: 'taggedElement'}, this)"></iframe>
<!-- Another test iframe(includes the javascript for resizing iframe) -->
<iframe src="http://localhost:3000/orders" id="testIframe" onload="iFrameResize({ log: true, warningTimeout: 1000000, heightCalculationMethod: 'lowestElement'}, this)"></iframe>
Hi @akshayshinde7
Check your browser developer console for hints. And use the debugger to dig in further.
My first guess maybe the script is getting blocked.
The integrated iFrameResizer.js in Metabase is 3.5.11, so maybe the option is not supported?
The PostMessage was added much later and I don’t think it communicates with the iFrameResizer script.
Hi @flamber, thanks for the suggestions.
I moved to iframeResizer v3.5.11 on my test page as well as the hosting page. Still no luck.
When I run the iFrameResize function I see a lot of things being logged from my testIframe whereas there’s nothing happening on the Metabase iframe.
I also confirmed that Metabase is loading the iframeresizewindow.js in their code but it doesn’t seem to be working. Also I couldn’t find the version they’re using as all the javascript files are combined into a single bundle minified bundle. I legit have no idea on what might be going wrong. Anyone else able to get it working?
I’m using the community edition.
iFrameResize({ log: true, warningTimeout: 1000000}, '#testIframe')
iframeSizer.min.js:133 [iFrameSizer][Host page: testIframe] IFrame scrolling disabled for testIframe
iframeSizer.min.js:133 [iFrameSizer][Host page: testIframe] [init] Sending msg to iframe[testIframe] (testIframe:8:false:true:32:true:true:null:bodyOffset:null:null:0:false:parent:scroll) targetOrigin: http://localhost:3000
[iframe#testIframe]
orders:207 [iFrameSizer][testIframe] Initialising iFrame (http://localhost:3000/orders)
orders:207 [iFrameSizer][testIframe] TargetOrigin for parent set to: *
orders:207 [iFrameSizer][testIframe] HTML & body height set to "auto"
orders:207 [iFrameSizer][testIframe] Enable public methods
orders:207 [iFrameSizer][testIframe] Add event listener: Animation Start
orders:207 [iFrameSizer][testIframe] Add event listener: Animation Iteration
orders:207 [iFrameSizer][testIframe] Add event listener: Animation End
orders:207 [iFrameSizer][testIframe] Add event listener: Input
orders:207 [iFrameSizer][testIframe] Add event listener: Mouse Up
orders:207 [iFrameSizer][testIframe] Add event listener: Mouse Down
orders:207 [iFrameSizer][testIframe] Add event listener: Orientation Change
orders:207 [iFrameSizer][testIframe] Add event listener: Print
orders:207 [iFrameSizer][testIframe] Add event listener: Ready State Change
orders:207 [iFrameSizer][testIframe] Add event listener: Touch Start
orders:207 [iFrameSizer][testIframe] Add event listener: Touch End
orders:207 [iFrameSizer][testIframe] Add event listener: Touch Cancel
orders:207 [iFrameSizer][testIframe] Add event listener: Transition Start
orders:207 [iFrameSizer][testIframe] Add event listener: Transition Iteration
orders:207 [iFrameSizer][testIframe] Add event listener: Transition End
orders:207 [iFrameSizer][testIframe] Create body MutationObserver
orders:207 [iFrameSizer][testIframe] In page linking not enabled
orders:207 [iFrameSizer][testIframe] Trigger event lock on
orders:207 [iFrameSizer][testIframe] Sending message to host page (testIframe:2368:1423:init)
iframeSizer.min.js:133 [iFrameSizer][Host page: testIframe] Received: [iFrameSizer]testIframe:2368:1423:init
iframeSizer.min.js:133 [iFrameSizer][Host page: testIframe] Checking connection is from: http://localhost:3000
iframeSizer.min.js:133 [iFrameSizer][Host page: testIframe] Checking height is in range 0-Infinity
iframeSizer.min.js:133 [iFrameSizer][Host page: testIframe] Checking width is in range 0-Infinity
iframeSizer.min.js:133 [iFrameSizer][Host page: testIframe] IFrame (testIframe) height set to 2368px
orders:207 [iFrameSizer][testIframe] Trigger event lock off
orders:207 [iFrameSizer][testIframe] --
iFrameResize({ log: true, warningTimeout: 1000000}, '#metabaseIframe')
iframeSizer.min.js:133 [iFrameSizer][Host page: metabaseIframe] IFrame scrolling disabled for metabaseIframe
iframeSizer.min.js:133 [iFrameSizer][Host page: metabaseIframe] [init] Sending msg to iframe[metabaseIframe] (metabaseIframe:8:false:true:32:true:true:null:bodyOffset:null:null:0:false:parent:scroll) targetOrigin: http://akna-lytics.herokuapp.com
[iframe#metabaseIframe]
@akshayshinde7 I’m not sure what you’re trying to do, but when I use the example code, then it resizes the iframe:
https://www.metabase.com/docs/latest/administration-guide/13-embedding.html#resizing-dashboards-to-fit-their-content
I don’t understand that you say it works with one of your examples, but not the other - I don’t understand which one works and doesn’t work.
Do you see any warnings/errors in the browser developer console?
Sorry for the confusion. I meant that I’ve created a dummy page with some random html and load it as an iframe to compare with the Metabase iframe. I’ve added the iframeresizer.contentwindow.js file on that as mentioned on the documentation. I did all of this to see if I was doing something wrong at my end. Now when I call the iFrameResize function on my page it works whereas it still doesn’t work with the iframe that’s being loaded from metabase community edition that I’ve hosted on Heroku. Also I’m ruling out a CORS issue as the console is not showing any errors related to that.
Thanks again for your help!!!
@akshayshinde7 Okay, maybe I don’t understand the problem, but then search the forum or Github - there are many people using embedding in various ways.
Try doing exactly what the documentation says - nothing more, nothing less:
<script src="http://metabase.example.com/app/iframeResizer.js"></script>
<iframe src="http://metabase.example.com/embed/dashboard/TOKEN" onload="iFrameResize({}, this)"></iframe>
Okay so it fixed itself. All I did was move from Heroku to AWS docker installation. Anyways, thanks for all the help.
1 Like