XBB
XBB
  • 发布:2015-03-21 16:47
  • 更新:2015-03-22 12:08
  • 阅读:1674

首页如何监听子页事件?

分类:MUI
mui

从首页打开子页 然后子页点击某元素后 子页关闭 首页自动做相应修改 请问如果我用自定义事件的话如何获取首页的页面ID 或是有其他方法也行。

2015-03-21 16:47 负责人:无 分享
已邀请:
太阳光

太阳光

index.html

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="utf-8">  
		<title>监听子页事件</title>  
		<script type="text/javascript">  
			function plusReady(){  
				document.querySelector("button").addEventListener("click",function(){  
					var w = plus.webview.create( "newlist.html" );  
						w.addEventListener( "loaded", function(){  
						w.show();  
					}, false );  
				},false);  
			}  
			window.plus ? plusReady() : document.addEventListener("plusready",plusReady,false);  
			function fun(i){  
				document.querySelector("p").innerHTML = "你点击了第"+i+"条新闻";  
			}  
		</script>  
	</head>  
	<body>  
		<h2>监听子页事件</h2>  
		<button type="button">打开子页</button>  
		<p></p>  
	</body>  
</html>

newlist.html

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="utf-8">  
		<title>新闻列表0</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('document.dispatchEvent(new CustomEvent("typeEvent"))');  
						//触发自定义事件有点麻烦,可以使用函数调用  
						pw && pw.evalJS('fun('+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>
DCloud_UNI_CHB

DCloud_UNI_CHB

该问题目前已经被锁定, 无法添加新回复