1

I am opening a webpage in inAppBrowser Cordova Android. I want to reload the page when user pull down that page. I am using iScrollView for that(https://github.com/watusi/jquery-mobile-iscrollview).

I am not able to even pull the opened webpage down nor events are firing?

I have tried following code, but I have trouble binding the events, since inAPPbrowser opens in a webview.

Loading a webpage via inAppBrowser, in index.js

ENV IS MY WEB PAGE URL

index.js

binding the events during device on Ready , I have also tried binding it with ref(in app browser reference), that also didn't work

onDeviceReady: function() {
        this.receivedEvent('deviceready');
         env = env_variable;

       ref = cordova.InAppBrowser.open(env, '_blank','clearcache=no,location=no, clearsessioncache=no, 
        footer=no,zoom=no' );

    new jQuery(function(){

                        new jQuery(".iscroll-wrapper").bind({
                            iscroll_onpulldown: onPullDown,
                            iscroll_onpullup: onPullUp
                        });

                        new jQuery( document ).ready(function() {
                                console.log( "ready!" );
                                alert('ready');
                        });
    });

Index.html

 <body>

    <div data-role="content" data-iscroll >
        <div class="app">
            <div class="iscroll-pulldown">
                <span class="iscroll-pull-icon"></span>
                <span class="iscroll-pull-label"></span>
            </div>
            <h1>My Power Grid</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>

            <div class="iscroll-pullup">
                <span class="iscroll-pull-icon"></span>
                <span class="iscroll-pull-label"></span>
            </div>

        </div>


    </div>

        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
            var jq = jQuery.noConflict();
        </script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        <script src="js/iscroll.js" type="text/javascript"></script>
        <script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/env.js"></script>



    </body>

Only message that I am getting in console is

: D/SystemWebChromeClient: file:///android_asset/www/js/iscroll.js: Line 1070 : 'webkitCancelAnimationFrame' is vendor-specific. Please use the standard 'cancelAnimationFrame' instead.
I/chromium: [INFO:CONSOLE(1070)] "'webkitCancelAnimationFrame' is vendor-specific. Please use the standard 'cancelAnimationFrame' instead.", source: file:///android_asset/www/js/iscroll.js (1070)

When I am not loading index.js and I put jquery code in index.html, then I am able to pulldown the page, also I am able to fire the events.

How to bind the iscroll with in app browser? Can anyone help?

harsh grover
  • 51
  • 7
  • what logs said ? can you show all index.html et index.js please – devseo Sep 02 '19 at 07:26
  • No logs are generated because data-iscroll is attached to
    and index.js opens up a new page. how to bind this new page with data-iscroll. I have updated the code also.
     – harsh grover Sep 02 '19 at 16:13

1 Answers1

1

Try to execute JS with executeScript method:

   var ref = cordova.InAppBrowser.open(env, '_blank','clearcache=no,location=no, clearsessioncache=no, 
    footer=no,zoom=no');
    ref.addEventListener('loadstart', function() {
        ref.executeScript({
        code: 
            'new jQuery(function(){

            new jQuery(".iscroll-wrapper").bind({
            iscroll_onpulldown: onPullDown,
            iscroll_onpullup: onPullUp
            });

            new jQuery( document ).ready(function() {
            console.log( "ready!" );

            });
            });'

        });
    });
devseo
  • 1,182
  • 1
  • 13
  • 26