examples/iframe.html

<!--
/*
 * Copyright 2017 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->

<!DOCTYPE html>

<html lang="en">
<head>
<title>Cardboard VRDisplay iframe test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style>
html, body, iframe {
  width: 100%;
  height: 100%;
  background-color: #000;
  color: #fff;
  margin: 0px;
  border: 0px;
  padding: 0;
  overflow: hidden;
}
</style>
</head>

<body>
</body>
<script>
  var iframe = document.createElement('iframe');
  iframe.src = 'index.html';
  iframe.width = '100%';
  iframe.height = '100%';
  iframe.setAttribute('allow', 'gyroscope; accelerometer');
  document.body.appendChild(iframe);

  // iOS, cross-origin iframes cannot access devicemotion events, so the parent
  // page must pass them via postMessage, which the CardboardVRDisplay
  // handles
  if (isIOS()) {
    window.addEventListener('devicemotion', function(e) {
      iframe.contentWindow.postMessage({
        type: 'devicemotion',
        deviceMotionEvent: cloneDeviceMotionEvent(e),
      }, '*');
    });
  }

  function isIOS() {
    return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  }

  function cloneDeviceMotionEvent(e) {
    return {
      acceleration: {
        x: e.acceleration.x,
        y: e.acceleration.y,
        z: e.acceleration.z,
      },
      accelerationIncludingGravity: {
        x: e.accelerationIncludingGravity.x,
        y: e.accelerationIncludingGravity.y,
        z: e.accelerationIncludingGravity.z,
      },
      rotationRate: {
        alpha: e.rotationRate.alpha,
        beta: e.rotationRate.beta,
        gamma: e.rotationRate.gamma,
      },
      interval: e.interval,
      timeStamp: e.timeStamp
    };
  }
</script>
</body>
</html>