html - 内容更改时调整 iframe (appetize.io) 的大小(跨域)

Question

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

问题:我将类似移动设备的显示 (appetize.io) 的内容嵌入到我网站的 iframe 中。我确实有旋转和更改手机大小的按钮。但是当我这样做时，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，直接看fiddle:http://jsfiddle.net/f5u9mh8s/

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

感谢您的帮助!

Answer 1

存在一个干净简单的解决方案，因为您使用的是 Appetize，它有一个 API 可用于此目的。如果 iframe 包含另一个没有 API 来告诉您设备方向的网站，该解决方案将变得不那么可靠。

在 iframe 中启动 Appetize session 后，您可以通过 Appetize API 接收消息。 Appetize docs表示当设备旋转时，orientationChanged 消息将发送给父级。他们有帮助地提供了a fiddle您可以在其中进行测试。打开浏览器控制台，单击“点击播放”按钮后，当您使用向右或向左旋转按钮旋转设备时，您会在控制台中看到一条消息，说明设备是纵向还是横向。

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

例如(这只是改编 Appetize fiddle 中的代码):

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);