主机页面

为了在您的应用程序中创建一个online office会话，主机必须创建一个 HTML 页面，该页面将在其中嵌入一个指向特定 WOPI 操作 URL的 iframe 元素。

主机页面必须包含以下元素：

出于安全目的，主机必须通过一个 form 元素将 access_token 和 access_token_ttl 参数 POST 到online office iframe。
使用 PostMessage与online office iframe 交互的 JavaScript 代码。
Body元素和online office的特定 CSS 样式，以避免视觉包。此外，主机页面应使用 WOPI 发现中提供的网站图标 URL 为页面设置适当的网站图标。
用于避免移动端浏览器的视觉和功能问题的 viewport 元标签。

主机页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width" />

    <title>ONLYOFFICE Document Editors</title>
    <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            -ms-content-zooming: none;
        }
        
        #office_frame {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0;
            border: none;
            display: block;
        }
    </style>
</head>

<body>

    <form id="office_form" name="office_form" target="office_frame" action="<%= actionUrl %>" method="post">
        <input name="access_token" value="<%= token %>" type="hidden" />
        <input name="access_token_ttl" value="<%= tokenTtl %>" type="hidden" />
    </form>

    <span id="frameholder"></span>

    <script type="text/javascript">
        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 Frame';
        office_frame.setAttribute('allowfullscreen', 'true');

        office_frame.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation allow-popups-to-escape-sandbox allow-downloads allow-modals');
        office_frame.setAttribute('allow', 'autoplay camera microphone display-capture');
        frameholder.appendChild(office_frame);

        document.getElementById('office_form').submit();
    </script>

</body>

</html>

请注意， "<%= actionUrl %>", "<%= token %>", "<%= tokenTtl %>" 字符串将使用适当的参数呈现。

参数

名称	描述	类型
access_token	主机将用于确定 WOPI 请求发出者的身份和权限的访问令牌。	string
access_token_ttl	访问令牌过期的时间，表示为自 1970 年 1 月 1 日 UTC 以来的毫秒数。建议将此参数设置为 10 小时。	integer

可以在这里找到有关构建主机页面的更多信息。