index.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="renderer" content="webkit">
  7. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
  8. <title>请通过以下验证</title>
  9. <style>
  10. body {
  11. margin: 0;
  12. }
  13. .title {
  14. height: 18px;
  15. margin: 15px;
  16. font-size: 18px;
  17. line-height: 18px;
  18. }
  19. #log {
  20. display: none;
  21. margin: 0;
  22. word-break: break-all;
  23. }
  24. #log.log {
  25. display: block;
  26. }
  27. #captcha_index_loading {
  28. position: fixed;
  29. top: 50%;
  30. left: 50%;
  31. overflow: hidden;
  32. transform: translate(-50%, -50%);
  33. }
  34. #captcha {
  35. position: absolute;
  36. top: 50%;
  37. left: 50%;
  38. width: 260px;
  39. height: 50px;
  40. transform: translate(-50%, -50%);
  41. }
  42. /* loading */
  43. .loader {
  44. width: 40px;
  45. height: 40px;
  46. }
  47. svg path,
  48. svg rect {
  49. fill: #3973ff;
  50. }
  51. </style>
  52. </head>
  53. <body>
  54. <div id="log"></div>
  55. <div id="captcha"></div>
  56. <div id="captcha_index_loading">
  57. <img class="captcha_index_img loader" id="captcha_img_loading" alt="加载中" style="display: none;">
  58. </div>
  59. <script>
  60. var debug = false;
  61. var logEle = document.getElementById('log');
  62. var isOffline = false;
  63. var indexVersion = '1.0.0'; // 中间页版本号,每次修改文件要进行版本号升级
  64. function log(str) {
  65. if (!debug) {
  66. return;
  67. }
  68. var p = document.createElement('p');
  69. p.appendChild(document.createTextNode(str));
  70. logEle.insertBefore(p, logEle.firstChild);
  71. // 同时将错误输出到控制台
  72. console.log(str);
  73. }
  74. // 错误构造函数
  75. function newError(msg, code, detail) {
  76. return {
  77. desc: {
  78. indexVersion: indexVersion,
  79. detail: detail
  80. },
  81. msg: msg,
  82. code: code
  83. }
  84. }
  85. var plusReady = function (callback) {
  86. if (window.plus) {
  87. callback();
  88. } else {
  89. document.addEventListener('plusready', callback);
  90. }
  91. };
  92. (function () {
  93. var jsBridge = (function () {
  94. var callbacks = {
  95. showBox: function () {
  96. captchaObj.showBox && captchaObj.showBox();
  97. }
  98. };
  99. return {
  100. callback: function (type, data) {
  101. return callbacks[type](data);
  102. },
  103. callNative: function(data){
  104. plusReady(function () {
  105. uni.postMessage({
  106. data
  107. })
  108. });
  109. }
  110. }
  111. })();
  112. // 暴露 jsBridge
  113. window.jsBridge = jsBridge;
  114. // jsBridge 与 全局全局错误捕获要尽可能早的加载,防止gt4中的错误捕获不到;
  115. if (window.addEventListener) {
  116. window.addEventListener('error', function (e) {
  117. jsBridge.callNative({
  118. time:new Date().getTime(),
  119. type: 'error',
  120. data: newError("gt4-index error", 60302, e.message)
  121. });
  122. })
  123. } else {
  124. window.onerror = function (e) {
  125. jsBridge.callNative({
  126. time:new Date().getTime(),
  127. type: 'error',
  128. data: newError("gt4-index error", 60302, e.message)
  129. });
  130. }
  131. }
  132. })();
  133. </script>
  134. <!-- 此链接位置不要改变,防止上面页面错误catch 不到gt4的错误-->
  135. <script src="./ct4.js"></script>
  136. <script src="./uni.webview.1.5.1.js"></script>
  137. <script>
  138. (function () {
  139. var startTime = 0;
  140. var clearID = 0;
  141. var captcha = document.getElementById('captcha');
  142. var loadingEle = document.getElementById('captcha_index_loading');
  143. var img = document.getElementById('captcha_img_loading');
  144. var query = location.href.split('?')[1];
  145. // 兼容安卓4.3版本样式问题
  146. var ua = navigator.userAgent.toLowerCase();
  147. if(/Android/.test(window.navigator.userAgent) && /android\s([\w.]+)/.exec(ua)[1] <= 4.3) {
  148. loadingEle.style.left = '45%';
  149. }
  150. // 兼容低版本Object.assign
  151. if (typeof Object.assign != 'function') {
  152. // Must be writable: true, enumerable: false, configurable: true
  153. Object.defineProperty(Object, "assign", {
  154. value: function assign(target, varArgs) { // .length of function is 2
  155. if (target == null) { // TypeError if undefined or null
  156. throw new TypeError('Cannot convert undefined or null to object');
  157. }
  158. var to = Object(target);
  159. for (var index = 1; index < arguments.length; index++) {
  160. var nextSource = arguments[index];
  161. if (nextSource != null) { // Skip over if undefined or null
  162. for (var nextKey in nextSource) {
  163. // Avoid bugs when hasOwnProperty is shadowed
  164. if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
  165. to[nextKey] = nextSource[nextKey];
  166. }
  167. }
  168. }
  169. }
  170. return to;
  171. },
  172. writable: true,
  173. configurable: true
  174. });
  175. }
  176. // 默认配置
  177. var config = {
  178. product: 'bind',
  179. onError: function (e) {
  180. // 错误信息中插入版本号
  181. e.desc = Object.assign({}, e.desc, { indexVersion: indexVersion });
  182. jsBridge.callNative({
  183. time:new Date().getTime(),
  184. type: 'error',
  185. data: e
  186. });
  187. }
  188. };
  189. function setDebug() {
  190. debug = true;
  191. logEle.className = 'log';
  192. }
  193. function paseURI() {
  194. return JSON.parse(decodeURIComponent(query.split('=')[1]));
  195. }
  196. function checkArgs(args) {
  197. //设置loading
  198. img.src = args['loading'] ? args['loading'] : './gt4-loading.gif';
  199. clearID = setTimeout(function () {
  200. img.style.display = 'inline-block';
  201. }, 200);
  202. // 是否开启debug
  203. if (args['debug']) {
  204. setDebug(true);
  205. startTime = (new Date()).getTime();
  206. log(JSON.stringify(args))
  207. }
  208. // 设置title
  209. if (args['title'] && args['title'] != "") {
  210. var h3 = document.createElement('h3');
  211. h3.className = 'title';
  212. h3.appendChild(document.createTextNode(decodeURIComponent(args['title'])));
  213. captcha.appendChild(h3);
  214. }
  215. // 检查必要参数
  216. if (!args['captchaId']) {
  217. log('args error: ' + query);
  218. }
  219. // 通过useLocalOffline判断是否会加入宕机效验
  220. if (args['useLocalOffline']) {
  221. //宕机启用自己的方法
  222. config.offlineCb = function () {
  223. isOffline = true;
  224. jsBridge.callNative({
  225. time:new Date().getTime(),
  226. type: 'result',
  227. data: {
  228. captcha_id: args['captchaId'],
  229. challenge: args['challenge'],
  230. offline: true
  231. }
  232. });
  233. }
  234. }
  235. }
  236. function mergeOptions(args) {
  237. for (var k in args) {
  238. if (args.hasOwnProperty(k) &&
  239. ['debug', 'title', args['type']].indexOf(k) === -1) {
  240. config[k] = args[k];
  241. }
  242. }
  243. }
  244. if (!query) {
  245. setDebug();
  246. log('no query: ' + location.href);
  247. return false;
  248. }
  249. // 解析参数
  250. var args = paseURI(query);
  251. // 检查参数
  252. checkArgs(args);
  253. // 合并配置项
  254. mergeOptions(args);
  255. // 初始化验证码
  256. var handler = function (captchaObj) {
  257. window.captchaObj = captchaObj;
  258. captchaObj
  259. .appendTo(captcha)
  260. .onSuccess(function () {
  261. var result = captchaObj.getValidate();
  262. log('Success validate: ' + result);
  263. jsBridge.callNative({
  264. time:new Date().getTime(),
  265. type: 'result',
  266. data: result
  267. });
  268. })
  269. .onReady(function () {
  270. log('load time: ' + ((new Date()).getTime() - (startTime || 0)));
  271. jsBridge.callNative({
  272. time:new Date().getTime(),
  273. type: 'ready',
  274. data: {
  275. ready: 0
  276. }
  277. })
  278. if (!isOffline) {
  279. // 非宕机模式下获取移动端coreSDK数据
  280. jsBridge.callNative({
  281. time:new Date().getTime(),
  282. type: 'get'
  283. })
  284. }
  285. clearTimeout(clearID);
  286. loadingEle.style.display = 'none';
  287. })
  288. .onClose(function () {
  289. jsBridge.callNative({
  290. time:new Date().getTime(),
  291. type: 'close'
  292. });
  293. })
  294. .onError(function (e) {
  295. e.desc && (e.desc.indexVersion = indexVersion);
  296. jsBridge.callNative({
  297. time:new Date().getTime(),
  298. type: 'error',
  299. data: e
  300. });
  301. })
  302. .onFail(function (e) {
  303. jsBridge.callNative({
  304. time:new Date().getTime(),
  305. type: 'fail',
  306. data: e
  307. });
  308. })
  309. };
  310. try {
  311. window.initAlicom4(config, handler);
  312. } catch (error) {
  313. jsBridge.callNative({
  314. time:new Date().getTime(),
  315. type: 'error',
  316. data: newError("gt4-index error", 60302, '加载验证过程中报错')
  317. });
  318. }
  319. })();
  320. </script>
  321. </body>
  322. </html>