Host page

To open FilezOffice online document pages inside your application, the host must create an HTML page that embeds an iframe pointing to a specific WOPI action URL.

The host page must include:

For security, a form element that POSTs the access_token and access_token_ttl parameters to the online office iframe.
JavaScript code to interact with the online office iframe using postMessage.
Specific CSS styles for the body element and online office to avoid visual issues.
A viewport meta tag to avoid visual and functional issues in mobile browsers.

Host page code

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

<head>
  <meta charset="utf-8" />

  <!-- Enable IE Standards mode -->
  <meta http-equiv="x-ua-compatible" content="ie=edge" />

  <title></title>
  <meta name="description" content="" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
  />

  <link rel="shortcut icon" href="<OFFICE APPLICATION FAVICON URL>" />

  <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('allow', 'fullscreen *');
        frameholder.appendChild(office_frame);

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

</body>

</html>

Note that the "<%= actionUrl %>", "<%= token %>", "<%= tokenTtl %>" strings will be rendered with the appropriate values.

Parameters

Name	Type	Description
access_token	string	The access token that the host uses to determine the identity and permissions of the issuer of a WOPI request.
access_token_ttl	string	The time when an access token expires, represented as the number of milliseconds since January 1, 1970 UTC. We recommend setting this parameter to 10 hours. This parameter can also be set to 0, which tells the client that the token expiry is infinite or unknown. This can lead to unexpected data loss due to access token expiry, so we strongly recommend specifying a value for access_token_ttl.

More information about building a host page can be found here.

Host page code​

Parameters​

Host page code

Parameters