WOPI在线Office插件集成问题：子Iframe未向父Frame发消息启用SFTP=1

我在将Office iframe集成到应用程序时遇到了问题：子iframe完全没有向父iframe发送任何消息。

应用程序URL：

https://FFC-word-edit.officeapps.live.com/we/wordeditorframe.aspx?wopisrc=WOPISRCURL&jsapi=1&sftc=1&wdenableroaming=1&mscc=1&wdodb=1&jsapiver=v1&&cac=1&mtf=1&sfp=1&wopicomplete=1&rct=Medium&ctp=LeastProtected&McasTsid=15600

集成代码如下：

<body>
    <form id="office_form" name="office_form" target="office_frame" action="${applicationURL}" method="post">
        <input name="access_token" id="access_token" value="${access_token}" type="hidden" />
        <input name="access_token_ttl" id="access_token_ttl" value="${access_token_ttl}" type="hidden" />
        <input name="host_install_addins" value="{ {addinId: 'WA104379642', type: 'TaskPaneApp'}} " type="hidden" />
    </form>
    <span id="frameholder"></span>

    <script type="text/javascript">
    function handlePostMessage(e) {

        // The actual message is contained in the data property of the event.
        var msg = JSON.parse(e.data);

        // The message ID is now a property of the message object.
        var msgId = msg.MessageId;

        alert('Received PostMessage ' + msgId + ' from ' + e.origin);

        if (msgId === 'App_IsFrameTrusted') {

            // Post back Host_IsFrameTrusted
            var msg = {
                "MessageId": "Host_IsFrameTrusted",
                "SendTime": Date.now(),
                "Values": {
                    "isTopFrameTrusted": true // Hack
                }
            };

            // Check e.origin is expected origin
            e.source.postMessage(msg, e.origin);
        }
    }
    window.addEventListener('message', handlePostMessage, false);
    
    var frameholder = document.getElementById('frameholder');
    var office_frame = document.createElement('iframe');
    office_frame.name = 'office_frame';
    office_frame.id = 'office_frame';
    office_frame.title = 'Office Online Frame';
    office_frame.setAttribute('allowfullscreen', 'true');
    frameholder.appendChild(office_frame);
    document.getElementById('office_form').submit();
    sessionStorage.setItem('versionstatusrefreshes', 0);

    </script>
</body>

有没有其他开发者遇到过类似问题？

可能的排查方向与解决方法 #

• 补全iframe权限配置：当前仅设置了allowfullscreen，Office Online iframe需要跨域消息交互权限，建议添加完整的allow属性：

  office_frame.setAttribute('allow', 'cross-origin-isolated; post-message; fullscreen');
  

• 检查WOPI服务端配置：确认wopisrc指向的WOPI服务端返回的access_token权限有效、文件状态正常，验证失败会导致Office iframe无法触发消息交互。
• 调整监听与iframe加载顺序：当前先注册监听再创建iframe，但如果iframe加载过快，初始消息可能在监听生效前发送。可以改为先创建iframe，再注册监听最后提交表单：

  // 调整执行顺序
  var frameholder = document.getElementById('frameholder');
  var office_frame = document.createElement('iframe');
  office_frame.name = 'office_frame';
  office_frame.id = 'office_frame';
  office_frame.title = 'Office Online Frame';
  office_frame.setAttribute('allowfullscreen', 'true');
  office_frame.setAttribute('allow', 'cross-origin-isolated; post-message');
  frameholder.appendChild(office_frame);
  
  window.addEventListener('message', handlePostMessage, false);
  document.getElementById('office_form').submit();
  

• 检查控制台错误：打开浏览器开发者工具，查看是否存在跨域报错、资源加载失败或脚本执行异常，这些问题会阻断消息发送流程。
• 修正Addin配置格式：host_install_addins的值有多余空格，正确格式应为{"addinId": "WA104379642", "type": "TaskPaneApp"}，格式错误会导致初始化失败。

内容的提问来源于stack exchange，提问作者Yogesh Patel