Files
chrome-extensions-samples/samples/webview-samples/webview/page_hosted_in_external_server.html
2014-09-02 18:06:16 +02:00

82 lines
2.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page hosted, for webview sample</title>
</head>
<body>
<p>This page is hosted at an external server. Observe how it interacts with the embedder application</p>
<button id="sendmessage">Send message to app</button><br>
<button id="pointerlock">Pointer lock</button><br>
<button id="captureimage">Capture image</button><br>
<button id="geoloc">Request geolocation</button><br>
<a href="http://google.com">Go to google.com</a><br>
<div id="log"></div><br>
<script type="text/javascript">
(function() {
var log=document.getElementById("log");
var appWindow, appOrigin;
function onMessage(e) {
appWindow = e.source;
appOrigin = e.origin;
console.log(e);
}
function doSendMessage() {
log.innerText="";
if (appWindow && appOrigin) {
appWindow.postMessage("this is a message from the page!", appOrigin)
log.innerText="message sent";
} else {
log.innerText="ERROR: don't have app info - no initial message received";
}
}
function doPointerLock() {
document.body.webkitRequestPointerLock();
log.innerText="Pointer lock requested";
}
function doCaptureImage() {
var video = document.querySelector('video');
if (!video) {
video = document.createElement('video');
video.style.width="200px";
video.autoplay = true;
document.body.appendChild(video);
}
navigator.webkitGetUserMedia(
{video: true, audio: true},
function(stream) {
video.src = window.URL.createObjectURL(stream);
log.innerText="video running, enjoy!";
}, function(err) { console.log(err);});
}
function doGeoloc() {
log.innerText="requested position";
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
log.innerText='position='+position;
});
}
}
window.addEventListener('message', onMessage);
document.getElementById("sendmessage").addEventListener('click', doSendMessage);
document.getElementById("pointerlock").addEventListener('click', doPointerLock);
document.getElementById("captureimage").addEventListener('click', doCaptureImage);
document.getElementById("geoloc").addEventListener('click', doGeoloc);
})();
</script>
</body>
</html>