html5puls触发自定义事件

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2015-3-23   阅读次数: 6   查看权限: 游客查看

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>

 

关键词: html5puls,dispatchEvent,addEventListener   编辑时间: 2015-3-23 20:38:12

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程