Question

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

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

父窗口：

<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自动更改它的直径。

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

1 个答案: