H5获取地理位置+自动更新服务器数据+WebWorker的使用+H5缓存的使用

最新推荐文章于 2021-12-28 12:02:20 发布

转载最新推荐文章于 2021-12-28 12:02:20 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/xiejunbo/blog/516857

文章标签：

#java

本文介绍了H5中的地理位置获取、服务器推送事件（SSE）、Web Worker的使用方法以及H5缓存清单的应用，提供了详细的代码实例。

为什么80%的码农都做不了架构师？>>>

H5获取地理位置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id="demo">获取当前位置坐标:</p>
<button onclick="getLocation()">Click me</button>
<script>
var x = document.getElementById("demo");

function getLocation(){
	
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(showPosition);
	}else{
		x.innerHTML="该浏览器不支持获取地理位置!";
	}
}

function showPosition(position) {
	x.innnerHTML = "纬度：" + position.coords.latitude + "<br>经度：" + position.coords.longitude;	
}


</script>
</body>
</html>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
自动更新服务器数据：（服务端需设置content_type为text/event-stream）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
	<h1>获取服务端更新数据</h1>
	<div id="result"></div>

	<script>
		if (typeof (EventSource) !== "undefined") {
			var source = new EventSource("http://localhost:8081/web/test/sse.do");
			source.onmessage = function(event) {
				alert("1");
				document.getElementById("result").innerHTML += event.data + "<br>";
			};
		} else {
			document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 server-sent 事件...";
		}
	</script>

</body>
</html>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
WebWorker的使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>



<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button> 
<button onclick="stopWorker()">停止工作</button>
 
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
            if(event.data == "50"){
            	stopWorker();
            }
        };
    } else {
        document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
    }
}

function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>

</body>
</html>
	
demo_workers.js :

var i=60;

function timedCount() {
	i=i-1;
	postMessage(i);
	setTimeout("timedCount()",1000);
}
timedCount();		




H5缓存的使用:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html manifest="${pageContext.request.contextPath}/resources/manifest/test.appcache">
<head>
 <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<script src="${pageContext.request.contextPath}/resources/js/demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">获取日期和时间</button></p>
<p><img src="${pageContext.request.contextPath}/resources/images/header.png"></p>
</body>
</html>


/manifest/test.appcache
CACHE MANIFEST
#version 1.1.8 2015-11-06 15:30:22
CACHE:
	../js/demo_time.js
	../images/header.png
NETWORK:
*
FALLBACK:

转载于:https://my.oschina.net/xiejunbo/blog/516857