Question

我用谷歌搜索了一些，但有一些线索，但我无法获得任何这些线索：

我的页面有一个iframe，src指向外部页面（跨域）。当子/ iframed页面加载时，它会发布其高度的消息。我在javascript中放了一个高度的console.log。如果我在一个单独的窗口中打开该页面（换句话说，在单独的选项卡中键入iframe的src URL），控制台会记录预期的高度。

然而，当我用iframe打开父页面时，控制台会记录0或非常不正确的值150.我已经查看了css和html，我没有任何150的规格..任何人都知道这里发生了什么？

抽象代码：

父HTML：

...
<iframe src="example.childpage.com" scrolling="no" frameBorder="0"></iframe>
...

家长Javascript：

...
$(document).ready(function(){
    window.addEventListener('message', function(m){
        var messageData = m.data;
        if(messageData.type=='document-loaded' && 
            messageData.hasOwnProperty('height'){
            resize_iframe(messageData.height); //function defined else where 
                                               //and works
        };
});
...

IFrame Javascript：

...
$(document).ready(function(){
    var body = document.body;
    var html = document.documentElement;
    var maxHeight = Math.max(body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight);
    //Logs height correctly when opened in a separate window but not when 
    //iframed
    console.log("POSTING HEIGHT", maxHeight); 
    window.parent.postMessage({'type':'document-loaded', 'height': maxHeight}, 
        PARENT_HOST_URL); //PARENT_HOST_URL defined elsewhere
});
...

我意识到我在这里混合了jquery和vanilla javascript;我已经完成了上面显示的$（document）.height（）和Math.max（）以获得高度，但两种方式仍然存在相同的问题。

非常感谢！

Answer 1

好的，我终于找到了一个很好的解决方案：

$('iframe').load(function() {
    this.style.height =
    this.contentWindow.document.body.offsetHeight + 'px';
});

由于某些浏览器（较早的Safari和Opera）在CSS渲染之前报告onload已完成，因此您需要设置微超时并将其设置为空白并重新分配iframe的src。

$('iframe').load(function() {
    setTimeout(iResize, 50);
    // Safari and Opera need a kick-start.
    var iSource = document.getElementById('your-iframe-id').src;
    document.getElementById('your-iframe-id').src = '';
    document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
    document.getElementById('your-iframe-id').style.height = 
    document.getElementById('your-iframe- 
id').contentWindow.document.body.offsetHeight + 'px';
}

Answer 2

我有一个循环通过不可访问的元素的函数，并在它们上调用$（element）.hide（） - 它设置样式display：none。

结果计算元素的高度分别是它在实际页面上的可见性，而不管它是否在iframe中。所以浏览器无法看到它，因此高度被误算（仍然很奇怪它返回一个随机的150px值）。这就解释了为什么它在一个单独的页面上正确计算。

我只是将隐藏的可见性设置为隐藏，而不是做hide（），这解决了我获得不正确高度的问题。

页面在iframe内部时具有不同的高度

2 个答案: