Чтобы создать сеанс онлайн-офиса в вашем приложении, хост должен создать 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 %>» будут отображаться с соответствующими параметрами.
Параметры
Название | Описание | Тип |
access_token | Маркер доступа, который хост будет использовать для определения идентификатора и разрешений отправителя запроса WOPI. | строковый |
access_token_ttl | Время истечения срока действия маркера доступа, представленное как количество миллисекунд с 1 января 1970 года по всемирному координированному времени (UTC). Рекомендуется установить этот параметр на 10 часов. | целое число |