Auto-resize iframes containing report DataPages

dspolyglot · October 25, 2017

Hi everyone,

Does anyone know how to automatically resize an iframe that contains a tabular report? I set the container iframe to a fixed width and height. However, that gives me too much space upon hitting the Search button and viewing the results page, which is larger than the search form.

I tried searching online but no luck. Please help.

Thanks in advance.

-dspolyglot

Franchiser · October 26, 2017

You can try adding this code in the iframe deployment frameborder="0" width="auto" height="auto" or frameborder="0" width="100%" height="100%"

Example of iframe deployment:

Hope this helps.

nightowl · November 1, 2017

Hi dspolyglot,

You can also try the following:

[RECOMMENDED] Create an external HTML file in your web hosting provider. [OR] you can also create an HTML DataPage.
Use this code inside the <body> element:

<!-- iframe container -->
<div id="cb-iframe-container"></div>

<!-- REFERENCE: http://stackoverflow.com/questions/9249680/how-to-check-if-iframe-is-loaded-or-it-has-a-content -->
<script type="text/javascript">
    function checkIframeLoaded()
    {
        // Get a handle to the iframe element
        var iframe    = document.getElementById('cb-iframe-1');
        var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

        // Check if loading is complete
        if (iframeDoc.readyState === 'complete')
        {
            // The loading is complete. Call the function we want executed once the iframe is loaded
            setIframeDimensions(iframe);
            return;
        }

        // If we are here, it is not loaded. Set things up so we check the status again in 100 milliseconds
        window.setTimeout('checkIframeLoaded();', 100);
    }
</script>

<script type="text/javascript">
    var previousHeight = '0px';
    var previousWidth  = '0px';
</script>

<!-- REFERENCE: http://www.dyn-web.com/tutorials/iframes/height/demo.php -->
<script type="text/javascript">
    function setIframeDimensions(iframe)
    {
        var doc = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document;

        // Reset to minimal height and width
        iframe.style.height = '10px';
        iframe.style.width  = '10px';
        iframe.style.visibility = 'hidden';

        // IE opt. for Bing/MSN needs a bit added or scrollbar appears
        iframe.style.height = getDocHeight(doc) + 4 + 'px';
        iframe.style.width  = getDocWidth(doc) + 4 + 'px';
        iframe.style.visibility = 'visible';

        // Detect height and/or width changes
        previousHeight = (iframe.style.height === previousHeight) ? previousHeight : iframe.style.height;
        previousWidth  = (iframe.style.width === previousWidth) ? previousWidth : iframe.style.width; 
    }

    function getDocHeight(doc)
    {
        doc = doc || document;

        // REFERENCE: https://stackoverflow.com/questions/1145850/
        var body = doc.body,
            html = doc.documentElement;
        var height = Math.max(
            body.scrollHeight, body.offsetHeight,
            html.clientHeight, html.scrollHeight, html.offsetHeight,
            600
        );

        return height;
    }

    function getDocWidth(doc)
    {
        doc = doc || document;

        // REFERENCE: https://stackoverflow.com/questions/1145850/
        var body = doc.body,
            html = doc.documentElement;
        var width = Math.max(
            body.scrollWidth, body.offsetWidth,
            html.clientWidth, html.scrollWidth, html.offsetWidth,
            1024
        );

        return width;
    }
</script>

<!-- REFERENCE: http://stackoverflow.com/questions/10418644/creating-an-iframe-with-given-html-dynamically -->
<script type="text/javascript">
    // TODO: Change the site and appkey as necessary --> 
    var site   = 'YOUR_SITE.caspio.com'; // EXAMPLE: c5gaf330.caspio.com
    var appkey = 'YOUR_APPKEY';

    window.onload = function ()
    {
        parent.createIframe(site, appkey);
    }

    function createIframe(site, appkey)
    {
        var iframe = document.createElement('iframe');
        iframe.id  = 'cb-iframe-1';
        iframe.style.borderStyle = 'none';

        var customContent = document.getElementById('cb-iframe-container');

        var oldIframe = document.getElementById('cb-iframe-1');
        if (oldIframe)
        {
            customContent.removeChild(oldIframe);
        }

        customContent.appendChild(iframe);

        var link = 'https://' + site + '/dp.asp?AppKey=' + appkey;
        var id   = 'cb' + appkey;

        var html = '<scr' + 'ipt type="text/javascript" src="https://' + site + '/scripts/embed.js"></scr' + 'ipt><scr' + 'ipt type="text/javascript">try{f_cbload(true, "' + site + '", "' + appkey + '");}catch(v_e){;}</scr' + 'ipt><div id="cxkg"><a href="' + link + '">Click here</a> to load this Caspio <a href="http://www.caspio.com" target="_blank" title="Cloud Database">Cloud Database</a></div><div id="' + id + '"><a href="https://www.caspio.com" target="_blank">Cloud Database</a> by Caspio</div>';

        iframe.contentWindow.document.open();
        iframe.contentWindow.document.write(html);
        iframe.contentWindow.document.close();

        checkIframeLoaded();
    }
</script>

Don't forget to update these two lines:

    // TODO: Change the site and appkey as necessary -->  
    var site   = 'YOUR_SITE.caspio.com'; // EXAMPLE: c5gaf330.caspio.com
    var appkey = 'YOUR_APPKEY';

Hope this helps.

-nightowl

Login

Auto-resize iframes containing report DataPages

Recommended Posts

dspolyglot

Link to comment

Share on other sites

Franchiser

Link to comment

Share on other sites

nightowl

Link to comment

Share on other sites

Join the conversation

Browse