Fix ReferenceError WebViewJavascriptBridge

[guibog]

Add missing window prefix to fix ReferenceError: Can't find variable: WebViewJavascriptBridge

After this little fix, the issue will become that window.WebViewJavascriptBridge is undefined, which is a little bit less cryptic.

[BhavinBhadani]

@guibog can u help me?

What If I am calling button using JS onClick event? How to handle that? Can u guide me? How to call that playSound button?

`

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<title>XYZ</title>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">

<!-- Template styles -->
<style rel="stylesheet">
    /* TEMPLATE STYLES */

    main {
        margin-top: 3rem;
    }

    main .card {
        margin-bottom: 2rem;
    }

    @media only screen and (max-width: 768px) {
        .read-more {
            text-align: center;
        }
    }
</style>

<main>
    <!--Main layout-->
    <div class="container">

        <!--Second row-->
        <div class="row">

            <div class="col-md-16">
                <div class="card">
                    <div class="card-block">
                        <h4 class="card-title">Play Music</h4>
                        <div class="read-more">
                            <a id="sound" class="btn btn-primary" onClick="playSound()">Play</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        </div>
        <!--/.Second row-->
        <hr>

    </div>
    <!--/.Main layout-->
</main>

<!-- SCRIPTS -->

<!-- JQuery -->
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>

<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>

<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>

<script type="text/javascript" src="js/script.js"></script>

<script type="text/javascript">

    function playSound() {
        bridge.callHandler('play_sound', {"name": "www/1.mp3"}, function(response) {
        log('JS got response', response, 'js')
        })

    }

</script>

<script type="text/javascript">
    function setupWKWebViewJavascriptBridge(callback) {
        if (window.WKWebViewJavascriptBridge) { return callback(WKWebViewJavascriptBridge); }
        if (window.WKWVJBCallbacks) { return window.WKWVJBCallbacks.push(callback); }
        window.WKWVJBCallbacks = [callback];
        window.webkit.messageHandlers.iOS_Native_InjectJavascript.postMessage(null)
    }

setupWKWebViewJavascriptBridge(function(bridge) {

                               
                               })
</script>

`