Sitefinity iFrame with dynamic height

Question

How can I create an iFrame in Sitefinity which adapts its height dynamically to the content (in this case different forms for the user to fill out. Some are longer, some shorter).

I have a working solution on our current website (done with DotNetNuke), however, the exact same code does not work with Sitefinity. I does display the site correctly, but doesn't adapt to the size.

Any idea? Here my code:

<html>
    <head>
        <script>

document.domain ="blvk.ch"

function resizeIframe(obj) 
{
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

window.onload = function() 
{
    var form = getQueryVariable("formular")
    var language = getQueryVariable("culture")
    var iframe = document.getElementById('formFrame');
iframe.src = "http://formular.blvk.ch/Webformulare_web/index.awp?P1=de-CH&P2=" + form;
}

</script>
    </head>
    <body>
        <p>TestText</p>
        <iframe name="Formular" id="formFrame" frameborder="0" scrolling="Yes" style="width: 580px; height: 800px;" onload="resizeIframe(this)" seamless="seamless">
        </iframe>
    </body>
</html>

I should add that I'm no webdev at all.

Thank you

Amit Joshi Amit Joshi · Accepted Answer · 2018-02-21T13:22:20

document.domain ="blvk.ch" is setting the page to it's superdomain but the iframe src is set to 'formular.blvk.ch' which is why it is treated as a cross-domain iframe. You can read more on that here.

Using obj.contentWindow.document.body.scrollHeight for resizing is not going to work in this scenario. Assuming you have control over the both domains, you can use iFrame-resizer javascript library

https://github.com/davidjbradshaw/iframe-resizer

<html>
    <head>
        <style>iframe{width: 1px;min-width: 100%;}</style>
        <script>

document.domain ="blvk.ch"

function resizeIframe(obj) 
{
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

window.onload = function() 
{
    var form = getQueryVariable("formular")
    var language = getQueryVariable("culture")
    var iframe = document.getElementById('formFrame');
iframe.src = "http://formular.blvk.ch/Webformulare_web/index.awp?P1=de-CH&P2=" + form;
}

</script>
    </head>
    <body>
        <p>TestText</p>
        <iframe name="Formular" id="formFrame" frameborder="0" scrolling="no" seamless="seamless">
        </iframe>
        <script>iFrameResize({log:true}, '#formFrame')</script>
    </body>
</html>

Sitefinity iFrame with dynamic height

1 Answers