html5puls触发自定义事件

您当前位置：首页 > 文章中心 > HTML5+CSS3 > HTML5puls

【HTML5puls】

下载

新闻

文章

html5puls触发自定义事件

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>监听子页事件</title>
		<script type="text/javascript">
			function eventFire(obj,ev,data){
				if(obj && ev){
					var evt = document.createEvent("Events");
					evt.detail = data || {};
					evt.initEvent(ev, false, true);				
					obj.dispatchEvent(evt);
				}
			}
			function plusReady(){
				document.querySelector("button").addEventListener("click",function(){
					var wt = plus.nativeUI.showWaiting();
					var w = plus.webview.create( "newlist.html" );
						w.addEventListener( "loaded", function(){
						wt.close();
						w.show();
					}, false );
				},false);
			}
			window.plus ? plusReady() : document.addEventListener("plusready",plusReady,false);
			document.addEventListener("yourEvent",function(e){
				console.log(JSON.stringify(e.detail));
			},false);
		</script>
	</head>
	<body>
		<h2>监听子页事件</h2>
		<button type="button">打开子页</button>
	</body>
</html>

newlist.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新闻列表</title>
		<style type="text/css">
		ul:active,ul:hover{background: none;}
		ul{margin: 0;padding: 0;}
		li{margin: 20px;border-bottom: 1px solid #DDDDDD;}
		</style>
		<script type="text/javascript">
			function plusReady(){
				var wvs=plus.webview.all();
				var pw = null;//首页ID
				for (var i = wvs.length;i --;) {
					if(~wvs[i].getURL().indexOf("index.html")){
						pw = wvs[i];//获取到首页的webview ID
						break;
					}
				}
				var li = document.querySelectorAll("li");
				for (var l = li.length; l--;) {
					li[l].addEventListener("click",function(e){
						pw && pw.evalJS('eventFire(document,"yourEvent",'+e.target.getAttribute("data-id")+')');
						plus.webview.close(plus.webview.currentWebview());//关闭当前页
					},false);
				}
			}
			window.plus ? plusReady() : document.addEventListener("plusready",plusReady,false);
		</script>
	</head>
	<body>
		<h1>新闻列表</h1>
		<ul>
			<li data-id="1">第1条新闻</li>
			<li data-id="2">第2条新闻</li>
			<li data-id="3">第3条新闻</li>
			<li data-id="4">第4条新闻</li>
			<li data-id="5">第5条新闻</li>
		</ul>
	</body>
</html>