iOS with JavaScript/html/uiwebview_with_jsexport.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name = "format-detection" content = "telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>JSExport</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>UIWebView with JSExport</h1>
      <h2>this page loaded locally on iPhone.</h2>
    </header>

    <section class="section">
      <h2>Pass value from JavaScript to Native</h2>
      <h3 class="note">
        <pre>
          使用： 使用前端 JavaScript 将 input[type="text"] 的值传给 native
        </pre>
      </h3>
      <h3 class="note">
        <pre>
          iOS 端使用使用 JSExport 将前台的值进行输出显示。
        </pre>
      </h3>
    </section>

    <div class="form-cell">
      <div class="form-cell__hd">
        <label class="form-cell__label">请输入</label>
      </div>
      <div class="form-cell__bd form-cell__primary">
        <input type="text" name="js2native" class="form-cell__input">
      </div>
    </div>

    <section class="section">
      <a class="btn btn__js2native" href="javascript;;">
        show native UIAlertController
      </a>
    </section>

    <script>
      ((win, doc) => {
        const $ = (s, elem) => elem ? elem.querySelector(s) : doc.querySelector(s);
        const addEvent = (n, e, h) =>  n.addEventListener(e, h, {capture: false});
    
        let js_to_native_btn = $('.btn__js2native')
          , js_to_native_input = $('[name="js2native"]')

        addEvent(js_to_native_btn, 'click', e => {
          e.preventDefault()
          let js_to_native_value = js_to_native_input.value.trim()
            , value_to_pass = js_to_native_value.length ? js_to_native_value : 'no value passed';

          jsBridge.alertWithMessage(value_to_pass)
        });

        // for native invoke JavaScript
        function clearInput () {
          if (js_to_native_input.value) js_to_native_input.value = ""
          else alert("nothing to be clear")
        }
       
       window.clearInput = clearInput

      })(window, document);
    </script>
  </body>
</html>