3 Replies Latest reply on May 22, 2017 5:27 PM by Jonathan Block

    How do I resize a custom middleware app iFrame

    Jonathan Block

      I'm trying to embed a custom middleware app directly into the page, without proxying through Jive's servers (after an initial dance to identify the current user and the page being viewed...which isn't quite working either but will be the subject of a separate question).  It's working and I see my remote server's content as desired, but once my remote content has loaded I can't resize the iFrame to fit.  In this mode I don't have access to Jive's javascripts, specifically whatever defines the gadgets.window.adjustHeight() function.

       

      Is it possible to pull in the necessary javascript file(s) from my external page (when viewed within the Jive app iFrame), or will it not work without Jive's proxy and the associated content rewrite feature in the middle?

       

      If there's a doc that addresses this specifically, I couldn't find it.

       

      Thanks in advance.

        • Re: How do I resize a custom middleware app iFrame

          Not 100% clear what you are trying to do, but it sounds like you are trying to put an IFRAME inside an iframe?

           

          Basically, if that is the case...you need to specify the iFRAME height/width and call the gadgets.window.adjustHeight();

           

          One angle might be to add in our simple shim, see:

          for examples, and you can simply call app.resize(); after resizing the iframe.

           

          This would allow you to have the IFRAME inside the Jive App ... and be re-sized accordingly, but the nested middleware service would not have any context/understanding of who the viewer was...unless this was done via a secure browser cookie or something.

           

          Ideally, this is not the way to build the integrations.  The recommended solution is to use a service from the remote system and construct the UI inside the app such that the UI has native context, but this is not always possible ... but wanted to make sure to mention that.

          1 person found this helpful
            • Re: How do I resize a custom middleware app iFrame
              Jonathan Block

              Thanks for the pointers.  I'll check them out.


              For what it's worth, I'm only talking about the app's iframe, not a nested one (though maybe that'll be what I need to make this work).

                • Re: How do I resize a custom middleware app iFrame
                  Jonathan Block

                  It took a bit more work than I was hoping, but I managed to achieve what I was looking for.  I'll get a bit elaborate here on the off chance that anyone else can benefit from my work:

                   

                  I needed to use nested frames, along the lines of Ryan's question, in combination with the iFrame Resizer library.  This library automatically resizes an iFrame whenever the frame's contents grow or shrink.  This eliminated the need to aggressively code the embedded site to send resize calls with every page change, and it works across domain boundaries.

                   

                  The three levels of pages are:

                   

                  The iFrame Resizer library requires a javascript file loaded by the parent page and another loaded by the page inside the iFrame.  So the base iFrame page loads the iframeResizer.min.js script, and the remote site loads the iframeResizer.contentWindow.min.js script.  Once the DOM has settled when the base iFrame has loaded, a call to iFrameResize with a few options and a reference to the iFrame to watch is all it takes to keep the secondary iFrame sized to match the remote site's content.

                   

                  The next step is to get the base iFrame to resize to match the secondary iFrame.  To do this, one of the iFrameResize options is a callback to fire whenever the secondary iFrame is resized.  In that callback, just call gadgets.window.adjustHeight(); to get Jive's default resizing behavior.

                   

                  Just to reiterate the reasons I needed the extra iFrame:

                  • Directly loading the remote site inside the base iFrame was leaving me unable to call the gadgets.window.adjustHeight(); function.  Even if I could have solved that by loading the right javascript libraries...
                  • It's a lot easier to let the system automatically resize an iFrame than have to actively call the resize function for every possible full or partial page load.  But the automatic resizing tool requires a component on each side of the iFrame, and we aren't allowed to insert scripts into the main page.

                   

                  Some code snippets for reference (this is not the exact code I used, so apologies for any typos):

                  BaseFrame.html

                  ...

                  <script type='text/javascript' src='iframeResizer.min.js'></script>

                  <script type='text/javascript'>

                     function onLoadHandler() {

                       frame = document.getElementById('secondaryFrame');

                       iFrameResize({resizedCallback: secondaryFrameResized, checkOrigin: false}, frame);

                       // Other onLoad setup stuff

                       frame.src = <remote URL determined by code not shown>

                    }

                   

                     function secondaryFrameResized(iFrame, height, width, type) {

                       gadgets.window.adjustHeight();

                    }

                   

                     gadgets.util.registerOnLoadHandler(onLoadHandler);

                  </script>

                   

                  <iframe id='secondaryFrame' style='width:100%;border:none;min-height:700px;'></iframe>

                  ...

                   

                  SecondaryFrame.html

                  ...

                    <script type='text/javascript' src='iframeResizer.contentWindow.min.js'></script>

                  ...

                  1 person found this helpful