demo.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <html>
  2. <head>
  3. <meta content="text/html; charset=utf-8" http-equiv="content-type">
  4. <title>
  5. js调用java
  6. </title>
  7. </head>
  8. <body>
  9. <p>
  10. <xmp id="show">
  11. </xmp>
  12. </p>
  13. <p>
  14. <xmp id="init">
  15. </xmp>
  16. </p>
  17. <p>
  18. <input type="text" id="text1" value="用户名(username)"/>
  19. </p>
  20. <p>
  21. <input type="text" id="text2" value="password"/>
  22. </p>
  23. <p>
  24. <input type="button" id="enter" value="发消息给Native" onclick="testClick();"
  25. />
  26. </p>
  27. <p>
  28. <input type="button" id="enter1" value="调用Native方法" onclick="testClick1();"
  29. />
  30. </p>
  31. <p>
  32. <input type="button" id="enter2" value="显示html" onclick="testDiv();"/>
  33. </p>
  34. <p>
  35. <input type="file" value="打开文件"/>
  36. </p>
  37. </body>
  38. <script>
  39. function testDiv() {
  40. document.getElementById("show").innerHTML = document.getElementsByTagName("html")[0].innerHTML;
  41. }
  42. function testClick() {
  43. var str1 = document.getElementById("text1").value;
  44. var str2 = document.getElementById("text2").value;
  45. //send message to native
  46. var data = {id: 1, content: "这是一个图片 <img src=\"a.png\"/> test\r\nhahaha"};
  47. WebViewJavascriptBridge.doSend(
  48. data
  49. , function(responseData) {
  50. document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
  51. }
  52. );
  53. }
  54. function testClick1() {
  55. var str1 = document.getElementById("text1").value;
  56. var str2 = document.getElementById("text2").value;
  57. //call native method
  58. window.WebViewJavascriptBridge.callHandler(
  59. 'submitFromWeb'
  60. , {'param': '中文测试'}
  61. , function(responseData) {
  62. document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
  63. }
  64. );
  65. }
  66. function bridgeLog(logContent) {
  67. document.getElementById("show").innerHTML = logContent;
  68. }
  69. function connectWebViewJavascriptBridge(callback) {
  70. if (window.WebViewJavascriptBridge && WebViewJavascriptBridge.inited) {
  71. callback(WebViewJavascriptBridge)
  72. } else {
  73. document.addEventListener(
  74. 'WebViewJavascriptBridgeReady'
  75. , function() {
  76. callback(WebViewJavascriptBridge)
  77. },
  78. false
  79. );
  80. }
  81. }
  82. connectWebViewJavascriptBridge(function(bridge) {
  83. bridge.init(function(message, responseCallback) {
  84. console.log('JS got a message', message);
  85. var data = {
  86. 'Javascript Responds': '测试中文!'
  87. };
  88. if (responseCallback) {
  89. console.log('JS responding with', data);
  90. responseCallback(data);
  91. }
  92. });
  93. bridge.registerHandler("functionInJs", function(data, responseCallback) {
  94. document.getElementById("show").innerHTML = ("data from Java: = " + data + Date.now());
  95. if (responseCallback) {
  96. var responseData = "Javascript Says Right back aka!";
  97. responseCallback(responseData);
  98. }
  99. });
  100. })
  101. </script>
  102. </html>