Question

任何身体都可以说我试图在iframe onload函数中加载url。我想显示没有滚动条的iframe并调整其内容但是父页面会滚动依赖于内容可以任何人告诉如何调整iframe的大小跨域url？

由于

Answer 1

为了根据内容调整iframe的大小，您可以使用postMessage将当前iframe高度发送给其父级。

iFrame中包含的页面需要使用postMessage将其当前高度发送到包含页面。包含页面必须侦听该消息并相应地更改iframe的高度。

包含页面中的代码可能如下所示：

function getBottom() {
    var max = jQuery("body").height();
    //Your additional calculations go here
    return max;
}

function updateHeight() {
    sendHeightToParent();
    setTimeout(updateHeight, 500);
}

function sendHeightToParent() {
    var messageObject = {
        "type":"size",
        "version":"1.0.0",
        "params":{
            "height": getBottom()
        }
    };

    //YOURTARGET is the target page if known. Otherwise use "*"
    parent.postMessage(JSON.stringify(messageObject), "YOURTARGET");
}

//Only possible if html5 post message is available
if (typeof parent.postMessage == 'function') {
    jQuery().ready(function() {
        sendHeightToParent();
        setTimeout(updateHeight, 500);
    });
}

然后父母监听事件并相应地更新iframe：

//Only possible if html5 post message is available
if (typeof parent.postMessage == 'function') {
    window.addEventListener("message", function (e) {
        obj = JSON.parse(e.data);
        if (obj.type == 'size') {
            myFrame = document.getElementById('YouIFrameId');
            myFrame.stye.height = obj.params.height + "px";
        }
    }
}

如何在跨域网址

1 个答案: