-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathWebPage.html
152 lines (116 loc) · 4.61 KB
/
WebPage.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!doctype html>
<html><head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" charset="utf-8">
<style type='text/css'>
h1 {
color: steelblue;
font-size:24px;
margin-top:24px;
}
/* 禁止当前组件弹出选择复制等菜单 */
body {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.my-button {
font-size: 20px;
width: 100%;
}
.tip {
font-size: 14px;
color: lightgray;
width: 100%;
}
.container {
padding: 5px;
border: dashed 1px gray;
margin-bottom: 10px;
}
#id-my-audio {
width:100%;
margin-top: 5px;
}
#id-my-video {
width: 100%;
height: 200px;
margin-top: 5px;
/* margin-bottom: -5px; 底部有5px的间距*/
border: solid 1px lightgray;
}
</style>
<script>
function clicked(e){
alert(e)
}
var audioUrl = 'http://txmov2.a.yximgs.com/bs2/newWatermark/MTE3NjcxNzQ4MTg_zh_3.mp4'
/* 视频播放的话通过点击按钮调用native，native再调用网页，需要native传过来
var videoUrl = 'http://muymov.a.yximgs.com/bs2/newWatermark/MTQwMjI4MjU2NDM_zh_4.mp4'
*/
function webViewCallNative(){
var params = {
'age':'abc',
};
window.webkit.messageHandlers.CallApp.postMessage(JSON.stringify(params));
}
//调用native方法，APP响应之后再调用网页的方法videoPlay
function callAPPViedeoPlay(){
var params = {'info': 'Thanks!'}
window.webkit.messageHandlers.APPVideoPlay.postMessage(params);
}
//等待native调用的方法
function videoPlay(videoUrl){
var video = document.getElementById('id-my-video')
video.setAttribute("src", videoUrl)
video.play()
}
//内部直接调用的方法
function audioPlay(){
var audio = document.getElementById('id-my-audio')
audio.setAttribute("src", audioUrl)
audio.play()
}
function addComment(){
var comment = document.getElementById('id-comment')
var childComment = document.createElement('button')
childComment.innerText = '确实厉害啊~'
var childCount = comment.children.length
var randNum = Math.floor(Math.random() * 1000000) + 100000
var commentId = childCount.toString() + randNum.toString()
childComment.setAttribute('id', commentId)
<!-- var method = 'clickComment("666~")' -->
// 必须要有双引号
var method = 'clickComment("' + commentId + '")'
childComment.setAttribute('onclick', method)
comment.appendChild(childComment)
childComment == null
}
function clickComment(e){
alert(e)
}
</script>
</head>
<body>
<h1>就想用HTML写页面</h1>
<div class='container'>
<div class='tip'>点击按钮后网页会调alert()方法，在native里可以拦截到这个消息</div>
<button onclick='clicked("alert")' style='width: 100%;'>网页alert</button>
</div>
<div class='container'>
<div class='tip'>点击网页上的按钮，调用native的方法 "CallApp" </div>
<button class='my-button' onclick='webViewCallNative()'>webViewCallNative</button>
</div>
<div class='container'>
<div class='tip'>网页内部给音频播放器更换播放源并播放视频</div>
<button class='my-button' onclick='audioPlay()'>播放歌曲《胡广生》</button>
<audio id='id-my-audio' controls></audio>
</div>
<div class='container'>
<div class='tip'>调用native方法"APPVideoPlay"，APP 响应之后再调用网页的方法"videoPlay" </div>
<button class='my-button' onclick='callAPPViedeoPlay()'>播放视频《只是太爱你》</button>
<video id='id-my-video' controls playsinline></video>
</div>
<button class='my-button' onclick='addComment()'>添加评论</button>
<div id='id-comment'>
<div>添加评论</div>
</div>
</body></html>