Чтобы создать сеанс онлайн-офиса в вашем приложении, хост должен создать HTML-страницу, на которой будет размещен элемент iframe, указывающий на конкретный URL-адрес действий WOPI.

Хост-страница должна содержать следующие элементы:

  • Элемент формы, через который хост должен отправить параметры access_token и access_token_ttl в iframe онлайн-офиса в целях безопасности.
  • Код JavaScript для взаимодействия с iframe онлайн-офиса с помощью PostMessage.
  • Специальные стили CSS для элемента body и онлайн-офиса, чтобы избежать визуальных мешков. Кроме того, главная страница должна установить соответствующий значок значка для страницы, используя URL-адрес значка, предоставленный при обнаружении WOPI.
  • Метатег области просмотра, чтобы избежать визуальных и функциональных проблем в мобильных браузерах.
    Код хост-страницы
<!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>Р7 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 %>» будут отображаться с соответствующими параметрами.

Параметры

НазваниеОписаниеТип
Маркер доступа, который хост будет использовать для определения идентификатора и разрешений отправителя запроса WOPI.строковый
Время истечения срока действия маркера доступа, представленное как количество миллисекунд с 1 января 1970 года по всемирному координированному времени (UTC). Рекомендуется установить этот параметр на 10 часов.целое число