Question

如何在Sitefinity中创建iFrame，使其动态高度适应内容（在这种情况下，用户填写不同的表格。有些更长，有些更短）。

我在当前网站上有一个可行的解决方案（使用DotNetNuke完成），但完全相同的代码不适用于Sitefinity。我确实正确显示了网站，但不适应尺寸。

有什么想法吗？这是我的代码：

<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>

我应该补充说，我根本不是webdev。

谢谢

Answer 1

document.domain ="blvk.ch"正在将页面设置为它的超级域名，但是 iframe src设置为'formular.blvk.ch'，这就是为什么它被视为跨域iframe。您可以在here上阅读更多内容。

使用obj.contentWindow.document.body.scrollHeight调整大小在这种情况下不起作用。假设您可以控制这两个域，则可以使用 iFrame-resizer javascript库

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

1 个答案: