Question

我正在尝试自动调整嵌入另一个网站内容的iframe的大小。我还没有找到解决方案，所以我需要您的专业知识！

问题：我在网站上的iframe中嵌入了类似移动设备的显示器（appetize.io）的内容。我确实有一些按钮可以旋转和更改手机的尺寸。但是当我这样做时，iframe的大小并没有相应地调整。结果，移动电话的显示被截断。我想自动调整iframe的大小。

HTML：

Device orientation: <button onclick="rotateLeft()">rotate left</button>
<button onclick="rotateRight()">rotate right</button><br/>
Device size:  <button onclick="setScale(10)">small</button> <button onclick="setScale(75)">normal</button>
<button onclick="setScale(100)">big</button>
<br/>
<iframe id="iframeid" scrolling="no" src="https://appetize.io/embed/demo_phq04c56jnvrkg0bn9w5ep4m9r?device=iphone8&orientation=portrait&scale=75&xdocMsg=true&deviceColor=white&debug=true&screenOnly=false"></iframe>

有关javascript和CSS的信息，请直接参见小提琴：http://jsfiddle.net/f5u9mh8s/

尝试单击调整大小和旋转按钮，您将看到...

感谢您的帮助！

Answer 1

存在一个干净而简单的解决方案，因为您使用的是Appetize，为此您可以使用API。如果iframe包含另一个没有API的站点来告诉您设备的方向，那么该解决方案的可靠性就会降低。

一旦您在iframe中启动了一个Appetize会话，就可以通过Appetize API接收消息。 Appetize docs指示当旋转设备时，orientationChanged消息将被发布到父级。他们会提供a fiddle，您可以在其中进行测试。打开浏览器控制台，然后单击“点按播放”按钮，然后使用向右或向左旋转按钮旋转设备时，您会在控制台中看到一条消息，指出该设备是纵向还是横向。

这意味着您可以侦听来自iframe的消息，并且在收到orientationChanged消息时，可以相应地调整iframe的大小。

例如（这只是从Appetize小提琴改编的代码）：

var iframe = document.getElementById('iframeid');

var messageEventHandler = function(event){
    if(event.data && event.data.type == 'orientationChanged'){
        if (event.data.data == 'landscape') {
            iframe.height = '416px';
            iframe.width = '870px';
        } else if (event.data.data == 'portrait') {
            iframe.height = '870px';
            iframe.width = '416px';
        }
    }
};

window.addEventListener('message', messageEventHandler, false);

内容更改时（跨域）调整iframe（appetize.io）的大小

1 个答案: