如何以编程方式强制 iframe 大小？

Question

我正在制作页面构建器类型的东西。对于普通视图，iframe 需要相应地调整大小，但对于移动/平板电脑视图，它需要设置大小。

使用 iframe-resizer https://github.com/davidjbradshaw/iframe-resizer @david-bradshaw

父窗口：

<script type="text/javascript" src="javascript/iframeResizer.min.js"></script>
....
$("iframe")[0].iFrameResize({
    checkOrigin: false,
    enablePublicMethods     : true,
    heightCalculationMethod: "bodyScroll",
});
....

视点大小改变器会这样做：

// set the iframes width and height "before" iframeresizer does stuff to make it look seemless    
_this.editor.css({
    "width":mapper[size].width,
    "height":mapper[size].height
})

我看到 .size() 工作的唯一方法是 iframe 本身

// fire off a sendMessage cause only way i saw .size() working is from the iframe itself
_this.editor[0].iFrameResizer.sendMessage({
    "width":mapper[size].width,
    "height":mapper[size].height,
    "forceSize":true
});

iframe 窗口

<script>
    var iFrameResizer = {
        messageCallback: function(message){
            console.log("messageCallback")
            console.log(message)
            if (message.forceSize==true){
                console.log(window.parentIFrame)
                window.parentIFrame.autoResize(false);
                window.parentIFrame.size(message.height); // Set height to 100px
            } else {
                // apply auto resizing again
            }

        }
    }
</script>
<script type="text/javascript" src="javascript/iframeResizer.contentWindow.min.js"></script>

我希望有一种更简单的方法，比如在父级 disableIframeResizer() 或其他东西上，或者能够从父级设置 .size() ，因为这是选择你的视点部分的地方。我似乎无法弄清楚： (

我的问题是：我需要以某种方式告诉 iframe 在 forceSize = true 时不要调整其大小，然后在收到消息时相应地调整大小。

感谢您提供了一个相当不错的图书馆！

Answer 1

我认为我没有 100% 理解您的问题。但我尽量按照我的理解回答你的问题。

您可以非常简单地在 html 中设置 iframe 的大小。你也可以在 CSS 的帮助下做到这一点。

您可以这样做：<iframe href="https://google.com" width="100%" height="100%">Your Browser Does Not Support Iframe</iframe>。

您也可以像这样设置确切的直径：<iframe href="https://google.com" width="300px" height="100px">Your Browser Does Not Support Iframe</iframe>

你也可以使用php来自动改变它的直径。