Revision of 手机浏览器调用发送短信

1

+

<!DOCTYPE html>

2

+

3

+

<head>

4

+

5

+

6

+

7

+

8

+

<style>

9

+

*{margin:0;padding:0;font-family:PingFang SC,Helvetica Neue,Microsoft Yahei,Hiragino Sans GB,"Microsoft Sans Serif",WenQuanYi Micro Hei,sans,sans-serif;zoom:1;}

10

+

html {font-size: calc(100vw / 7.5);}

11

+

body {font-size: 0.28rem;}

12

+

body{padding: 0 0.15rem;background: #EBEBEB;}

13

+

.sms-title {font-size: 0.34rem;color: #333333; height: 1.4rem; text-align: center; line-height: 1.4rem;}

14

+

.sub-title {font-size: 0.32rem;color: #333333; margin-bottom: 0.2rem}

15

+

.sms-part-one-item {display: flex; height: 0.80rem; line-height: 0.80rem; padding-left: 0.3rem; background: #FFFFFF; border: 1px solid #D3D3D3;}

16

+

.sms-tips {font-size: 0.24rem; color: #999999; margin-top: 0.1rem}

17

+

.sms-part-one {margin-bottom: 0.46rem;}

18

+

.sms-part-two-item {color: #666666; padding: 0 0.3rem; height: 1.2rem; background-color: #FFFFFF; display: flex; flex-direction: column; justify-content: center;}

19

+

.sms-part-one-item-label {display: inline-block; min-width: 1.4rem; }

20

+

.sms-part-one-item-label-en {display: inline-block; min-width: 1.5rem;}

21

+

.colon {float: right;}

22

+

/* 旧样式 */

23

+

.f-dn{display: none;}

24

+

.f-margin-top-5{margin-top: 5px;}

25

+

.bold{font-weight: bold;}

26

+

.title{text-align: center;font-size: 20px;height: 28px;line-height: 28px;margin-top: 35px;}

27

+

.title-info{margin-top: 5px;font-size: 15px;text-align: center;}

28

+

.qrcode-body{margin-top: 24px;border:1px solid #b9b9b9;background: #fff;padding:25px 15px;font-size: 16px;border-radius: 6px;}

29

+

.qrcode-body .step1 .step-title{color: #656565;margin-top: 0px;}

30

+

.qrcode-body .step-title{margin-top: 20px;margin-bottom: 10px;}

31

+

.qrcode-body .step p{font-size: 15px;line-height: 25px;}

32

+

.qrcode-footer{color: #656565;font-size: 15px;margin-top: 14px;}

33

+

.j-manaul{text-decoration: none;display: inline-block;border-radius: 6px; padding: 0 8px;height: 26px;line-height: 26px;text-align: center;color: #3B78DD ;border:1px solid #3B78DD;margin-left: 5px; margin-top: 8px;}

34

+

</style>

35

+

</head>

36

+

<body>

37

+

38

+

39

+

<div class="title-info">扫码二维码进行短信验证</div>

40

+

41

+

42

+

<div class="step-title">第一步：手机扫描二维码（已完成）</div>

43

+

</div>

44

+

45

+

<div class="step-title bold">第二步：点击发送短信</div>

46

+

<p>短信内容自动填充，无需手动输入，只需点击发送按钮即可</p>

47

+

<p>短信费用由运营商收取</p>

48

+

</div>

49

+

50

+

51

+

<p>发送完成后，点击邮箱页面的“<span id="sms-submit-btn-text-2"></span>”按钮完成注册</p>

52

+

</div>

53

+

</div>

54

+

55

+

<div>没有跳转到短信界面？</div>

56

+

<div class="f-margin-top-5">可尝试再次扫码或<a href="javascript:;" class="j-manaul" id="send-manaul">手动发送短信</a></div>

57

+

</div>

58

+

</div>

59

+

60

+

61

+

<div class="title-info">Scan the code for verification</div>

62

+

63

+

64

+

<div class="step-title">Step 1: scan the phone code (completed)</div>

65

+

</div>

66

+

67

+

68

+

<p>SMS content is automatically filled in, click send</p>

69

+

<p>SMS fees are charged by the operator</p>

70

+

</div>

71

+

72

+

73

+

<p>After sending, click the popup "<span id="sms-submit-btn-text-4"></span>" to complete the verification</p>

74

+

</div>

75

+

</div>

76

+

77

+

78

+

<div class="f-margin-top-5">Jump failed? You can try to scan the code again or <a href="javascript:;" class="j-manaul" id="send-manaul-en">send a message manually</a></div>

79

+

</div>

80

+

</div>

81

+

82

+

83

+

84

+

85

+

86

+

87

+

</div>

88

+

89

+

90

+

</div>

91

+

<p class="sms-tips">短信费用由运营商收取</p>

92

+

</div>

93

+

<div>

94

+

95

+

96

+

<p>发送完成后，点击邮箱页面的“<span id="sms-submit-btn-text-5"></span>”按钮完成确认。</p>

97

+

</div>

98

+

</div>

99

+

</div>

100

+

101

+

102

+

103

+

<p class="sub-title">Step 1: send a text message</p>

104

+

105

+

106

+

</div>

107

+

108

+

109

+

</div>

110

+

<p class="sms-tips">SMS fees are charged by the operator</p>

111

+

</div>

112

+

<div>

113

+

<p class="sub-title">Step 2: confirm delivery</p>

114

+

115

+

<p>After sending, click the "<span id="sms-submit-btn-text-6"></span>" button on the email page to complete the confirmation</p>

116

+

</div>

117

+

</div>

118

+

</div>

119

+

</body>

120

+

121

+

122

+

function getQueryValue(key) {

123

+

var query = decodeURIComponent(window.location.search.substring(1));

124

+

var items = query.split("&");

125

+

for (var i = 0; i < items.length; i++) {

126

+

var pair = items[i].split("=");

127

+

if (pair[0] === key) return pair[1]

128

+

}

129

+

return false;

130

+

}

131

+

132

+

// 获取展示信息

133

+

var smsCode = getQueryValue('smsCode') || getQueryValue('s') || '';

134

+

var smsServerNumber = getQueryValue('smsServerNumber') || getQueryValue('n') || '';

135

+

var title = getQueryValue('title') || '短信验证';

136

+

var btnText = getQueryValue('btnText') || '我已发送';

137

+

var hl = getQueryValue('hl') || 'zh_CN';

138

+

139

+

// 保底title

140

+

hl !== 'zh_CN' && (document.title = 'Send Short Messages');

141

+

142

+

// 需要自定义内容的id

143

+

var contentID = [['sms-code', smsCode], ['sms-server-number', smsServerNumber], ['sms-title',title], ['sms-submit-btn-text', btnText]];

144

+

for(var i = 1; i <= 6; i++) {

145

+

for (var j = 0; j < contentID.length; j++) {

146

+

var node = document.getElementById(contentID[j][0] + '-' + i);

147

+

node && (node.innerText = contentID[j][1]);

148

+

}

149

+

}

150

+

151

+

switch (hl) {

152

+

case 'zh_CN':

153

+

document.getElementById('part-one').style.display = 'block';

154

+

break;

155

+

case 'en_US':

156

+

document.getElementById('part-one-en').style.display = 'block';

157

+

break;

158

+

}

159

+

160

+

// 中文版点击手动

161

+

document.getElementById('send-manaul').addEventListener('click', function() {

162

+

document.getElementById('part-one').style.display = "none";

163

+

document.getElementById('part-two').style.display = "block";

164

+

window.mailStats.click('sms_page_send_manaul');

165

+

})

166

+

167

+

// 英文版点击手动

168

+

document.getElementById('send-manaul-en').addEventListener('click', function() {

169

+

document.getElementById('part-one-en').style.display = "none";

170

+

document.getElementById('part-two-en').style.display = "block";

171

+

window.mailStats.click('sms_page_send_manaul_en');

172

+

})

173

+

174

+

var u = navigator.userAgent;

175

+

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;//判断是否是 android终端

176

+

var isUc = u.indexOf('UCBrowser') > -1;

177

+

var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

178

+

if(isIOS&&!isUc){

179

+

window.location.href = 'sms:' + smsServerNumber.replace(' ', '') + '&body=' + smsCode;

180

+

}else if(isAndroid || isUc){

181

+

window.location.href = 'sms:' + smsServerNumber.replace(' ', '') + '?body=' + smsCode;

182

+

}

183

+

</script>

184

+

185

+

186

+

187

+

window.mailStats = new window.MailStats({

188

+

dataSource: 'mail',

189

+

interval: 1000

190

+

});

191

+

window.mailStats.config({

192

+

application: 'free_smsPage_21e1634b685719da',

193

+

uid: '',

194

+

appVersion: '1.0.0',

195

+

options: {

196

+

codelessTracking: true

197

+

}

198

+

});

199

+

window.mailStats.pv('sms_page_index_view');

200

+

</script>

201

+

</html>

jetsung / 手机浏览器调用发送短信

jetsung revised this gist 9 months ago. Go to revision

		@@ -0,0 +1,201 @@
1	+	<!DOCTYPE html>
2	+	<html lang="zh_CN">
3	+	<head>
4	+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
5	+	<meta http-equiv="Content-type" content="text/html;charset=utf-8">
6	+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
7	+	<title>上行短信</title>
8	+	<style>
9	+	*{margin:0;padding:0;font-family:PingFang SC,Helvetica Neue,Microsoft Yahei,Hiragino Sans GB,"Microsoft Sans Serif",WenQuanYi Micro Hei,sans,sans-serif;zoom:1;}
10	+	html {font-size: calc(100vw / 7.5);}
11	+	body {font-size: 0.28rem;}
12	+	body{padding: 0 0.15rem;background: #EBEBEB;}
13	+	.sms-title {font-size: 0.34rem;color: #333333; height: 1.4rem; text-align: center; line-height: 1.4rem;}
14	+	.sub-title {font-size: 0.32rem;color: #333333; margin-bottom: 0.2rem}
15	+	.sms-part-one-item {display: flex; height: 0.80rem; line-height: 0.80rem; padding-left: 0.3rem; background: #FFFFFF; border: 1px solid #D3D3D3;}
16	+	.sms-tips {font-size: 0.24rem; color: #999999; margin-top: 0.1rem}
17	+	.sms-part-one {margin-bottom: 0.46rem;}
18	+	.sms-part-two-item {color: #666666; padding: 0 0.3rem; height: 1.2rem; background-color: #FFFFFF; display: flex; flex-direction: column; justify-content: center;}
19	+	.sms-part-one-item-label {display: inline-block; min-width: 1.4rem; }
20	+	.sms-part-one-item-label-en {display: inline-block; min-width: 1.5rem;}
21	+	.colon {float: right;}
22	+	/* 旧样式 */
23	+	.f-dn{display: none;}
24	+	.f-margin-top-5{margin-top: 5px;}
25	+	.bold{font-weight: bold;}
26	+	.title{text-align: center;font-size: 20px;height: 28px;line-height: 28px;margin-top: 35px;}
27	+	.title-info{margin-top: 5px;font-size: 15px;text-align: center;}
28	+	.qrcode-body{margin-top: 24px;border:1px solid #b9b9b9;background: #fff;padding:25px 15px;font-size: 16px;border-radius: 6px;}
29	+	.qrcode-body .step1 .step-title{color: #656565;margin-top: 0px;}
30	+	.qrcode-body .step-title{margin-top: 20px;margin-bottom: 10px;}
31	+	.qrcode-body .step p{font-size: 15px;line-height: 25px;}
32	+	.qrcode-footer{color: #656565;font-size: 15px;margin-top: 14px;}
33	+	.j-manaul{text-decoration: none;display: inline-block;border-radius: 6px; padding: 0 8px;height: 26px;line-height: 26px;text-align: center;color: #3B78DD ;border:1px solid #3B78DD;margin-left: 5px; margin-top: 8px;}
34	+	</style>
35	+	</head>
36	+	<body>
37	+	<div class="qrcode" id="part-one" style="display: none;">
38	+	<div class="title bold" id="sms-title-1"></div>
39	+	<div class="title-info">扫码二维码进行短信验证</div>
40	+	<div class="qrcode-body">
41	+	<div class="step step1">
42	+	<div class="step-title">第一步：手机扫描二维码（已完成）</div>
43	+	</div>
44	+	<div class="step step2">
45	+	<div class="step-title bold">第二步：点击发送短信</div>
46	+	<p>短信内容自动填充，无需手动输入，只需点击发送按钮即可</p>
47	+	<p>短信费用由运营商收取</p>
48	+	</div>
49	+	<div class="step step3">
50	+	<div class="step-title bold">第三步：<span id="sms-submit-btn-text-1"></span> </div>
51	+	<p>发送完成后，点击邮箱页面的“<span id="sms-submit-btn-text-2"></span>”按钮完成注册</p>
52	+	</div>
53	+	</div>
54	+	<div class="qrcode-footer">
55	+	<div>没有跳转到短信界面？</div>
56	+	<div class="f-margin-top-5">可尝试再次扫码或<a href="javascript:;" class="j-manaul" id="send-manaul">手动发送短信</a></div>
57	+	</div>
58	+	</div>
59	+	<div class="qrcode" id="part-one-en" style="display: none;">
60	+	<div class="title bold" id="sms-title-2"></div>
61	+	<div class="title-info">Scan the code for verification</div>
62	+	<div class="qrcode-body">
63	+	<div class="step step1">
64	+	<div class="step-title">Step 1: scan the phone code (completed)</div>
65	+	</div>
66	+	<div class="step step2">
67	+	<div class="step-title bold">Step 2: hit send</div>
68	+	<p>SMS content is automatically filled in, click send</p>
69	+	<p>SMS fees are charged by the operator</p>
70	+	</div>
71	+	<div class="step step3">
72	+	<div class="step-title bold">Step 3: <span id="sms-submit-btn-text-3"></span> </div>
73	+	<p>After sending, click the popup "<span id="sms-submit-btn-text-4"></span>" to complete the verification</p>
74	+	</div>
75	+	</div>
76	+	<div class="qrcode-footer">
77	+	<!-- <div>Jump failed?</div> -->
78	+	<div class="f-margin-top-5">Jump failed? You can try to scan the code again or <a href="javascript:;" class="j-manaul" id="send-manaul-en">send a message manually</a></div>
79	+	</div>
80	+	</div>
81	+	<div id="part-two" style="display: none;">
82	+	<div class="sms-title" id="sms-title-3"></div>
83	+	<div class="sms-part-one">
84	+	<p class="sub-title">第一步：发送短信</p>
85	+	<div class="sms-part-one-item">
86	+	<span class="sms-part-one-item-label">编辑短信<span class="colon">：</span></span><span id="sms-code-1"></span>
87	+	</div>
88	+	<div class="sms-part-one-item" style="border-top: none;">
89	+	<span class="sms-part-one-item-label">发送至<span class="colon">：</span></span><span id="sms-server-number-1"></span>
90	+	</div>
91	+	<p class="sms-tips">短信费用由运营商收取</p>
92	+	</div>
93	+	<div>
94	+	<p class="sub-title">第二步：确认发送</p>
95	+	<div class="sms-part-two-item">
96	+	<p>发送完成后，点击邮箱页面的“<span id="sms-submit-btn-text-5"></span>”按钮完成确认。</p>
97	+	</div>
98	+	</div>
99	+	</div>
100	+	<div id="part-two-en" style="display: none;">
101	+	<div class="sms-title" id="sms-title-4"></div>
102	+	<div class="sms-part-one">
103	+	<p class="sub-title">Step 1: send a text message</p>
104	+	<div class="sms-part-one-item">
105	+	<span class="sms-part-one-item-label-en">Edit SMS<span class="colon">：</span> </span><span id="sms-code-2"></span>
106	+	</div>
107	+	<div class="sms-part-one-item" style="border-top: none;">
108	+	<span class="sms-part-one-item-label-en">Send to<span class="colon">：</span></span><span id="sms-server-number-2"></span>
109	+	</div>
110	+	<p class="sms-tips">SMS fees are charged by the operator</p>
111	+	</div>
112	+	<div>
113	+	<p class="sub-title">Step 2: confirm delivery</p>
114	+	<div class="sms-part-two-item">
115	+	<p>After sending, click the "<span id="sms-submit-btn-text-6"></span>" button on the email page to complete the confirmation</p>
116	+	</div>
117	+	</div>
118	+	</div>
119	+	</body>
120	+	<script>
121	+
122	+	function getQueryValue(key) {
123	+	var query = decodeURIComponent(window.location.search.substring(1));
124	+	var items = query.split("&");
125	+	for (var i = 0; i < items.length; i++) {
126	+	var pair = items[i].split("=");
127	+	if (pair[0] === key) return pair[1]
128	+	}
129	+	return false;
130	+	}
131	+
132	+	// 获取展示信息
133	+	var smsCode = getQueryValue('smsCode') \|\| getQueryValue('s') \|\| '';
134	+	var smsServerNumber = getQueryValue('smsServerNumber') \|\| getQueryValue('n') \|\| '';
135	+	var title = getQueryValue('title') \|\| '短信验证';
136	+	var btnText = getQueryValue('btnText') \|\| '我已发送';
137	+	var hl = getQueryValue('hl') \|\| 'zh_CN';
138	+
139	+	// 保底title
140	+	hl !== 'zh_CN' && (document.title = 'Send Short Messages');
141	+
142	+	// 需要自定义内容的id
143	+	var contentID = [['sms-code', smsCode], ['sms-server-number', smsServerNumber], ['sms-title',title], ['sms-submit-btn-text', btnText]];
144	+	for(var i = 1; i <= 6; i++) {
145	+	for (var j = 0; j < contentID.length; j++) {
146	+	var node = document.getElementById(contentID[j][0] + '-' + i);
147	+	node && (node.innerText = contentID[j][1]);
148	+	}
149	+	}
150	+
151	+	switch (hl) {
152	+	case 'zh_CN':
153	+	document.getElementById('part-one').style.display = 'block';
154	+	break;
155	+	case 'en_US':
156	+	document.getElementById('part-one-en').style.display = 'block';
157	+	break;
158	+	}
159	+
160	+	// 中文版点击手动
161	+	document.getElementById('send-manaul').addEventListener('click', function() {
162	+	document.getElementById('part-one').style.display = "none";
163	+	document.getElementById('part-two').style.display = "block";
164	+	window.mailStats.click('sms_page_send_manaul');
165	+	})
166	+
167	+	// 英文版点击手动
168	+	document.getElementById('send-manaul-en').addEventListener('click', function() {
169	+	document.getElementById('part-one-en').style.display = "none";
170	+	document.getElementById('part-two-en').style.display = "block";
171	+	window.mailStats.click('sms_page_send_manaul_en');
172	+	})
173	+
174	+	var u = navigator.userAgent;
175	+	var isAndroid = u.indexOf('Android') > -1 \|\| u.indexOf('Adr') > -1;//判断是否是 android终端
176	+	var isUc = u.indexOf('UCBrowser') > -1;
177	+	var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
178	+	if(isIOS&&!isUc){
179	+	window.location.href = 'sms:' + smsServerNumber.replace(' ', '') + '&body=' + smsCode;
180	+	}else if(isAndroid \|\| isUc){
181	+	window.location.href = 'sms:' + smsServerNumber.replace(' ', '') + '?body=' + smsCode;
182	+	}
183	+	</script>
184	+
185	+	<script src="https://mimg.127.net/p/tools/mailstats-sdk/mailstats.umd-1.1.8.js"></script>
186	+	<script>
187	+	window.mailStats = new window.MailStats({
188	+	dataSource: 'mail',
189	+	interval: 1000
190	+	});
191	+	window.mailStats.config({
192	+	application: 'free_smsPage_21e1634b685719da',
193	+	uid: '',
194	+	appVersion: '1.0.0',
195	+	options: {
196	+	codelessTracking: true
197	+	}
198	+	});
199	+	window.mailStats.pv('sms_page_index_view');
200	+	</script>
201	+	</html>