我正在制作页面构建器类型的东西。对于普通视图，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 时不要调整大小，然后在消息进入时相应地调整大小。
感谢您提供了一个相当不错的图书馆！