Rectangle 27 0

ref.executeScript(details,callback)

The current built version of the JavaScript doesn't seem to have this (just search for 'executeScript' and you'll see it is absent. It looks like you could try building your own copy of the JavaScript to test it out, since the bridge code already exists in the repo: https://github.com/apache/cordova-js/blob/master/lib/common/plugin/InAppBrowser.js#L55 and as you pointed out there is already Java code to support this (so, it should work at least on Android.) I'm not sure how well tested or supported this feature is yet though so you might run into some issues. You should try it out and let us know!

You can find instructions for building the JavaScript here: https://github.com/apache/cordova-js

This looks like the closest answer i can get right now with InAppBrowser. Though i have already changed my workflow to achieve my goal with what i have in hand :)

Thanks, yeah it will take some hacking to get it to work I think. I'll try to come back and update my post with some workable code when the new version comes out.

Have a look at the mobile-spec tests, under inAppBrowser. There are tests in there that inject JavaScript code into a web page; I just tested today with the nightly code (pulled from github, you probably can't use the built versions from phonegap.com yet), and it worked. Check it out here: github.com/apache/cordova-mobile-spec/blob/master/inappbrowser/

javascript - Injecting Scripts from internal storage to cordova inappb...

javascript cordova phonegap-plugins inappbrowser
Rectangle 27 0

I had the same problem. Using cordova3.1.0.

ref.executeScript(
    {
        file: "http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"
        //webURL works fine with 'file'
    }, function()
    {
        $.get("js/myscript.js", function(data)
        {  //workaround to obtain code using jQuery.get
            ref.executeScript(
            {
                code: data
            }, function()
            {
                console.log('ref.executeScript done');
            });
        });
    });

When I set the file URL as webURL http://.... ,

it worked, but I could not figure out how to point the local js file,

The sample code illustrates: jQuery is already installed on the phonegap App, and also trying to use jQuery on the target inAppBrowser app. Just in case.

I include a line a follows at the beginning of my PhoneGap apps. (assuming the start page is index.html)<br /><br /> window.basePath = window.location.href.replace('index.html', ''); <br /><br /> Then when I need to I reference basePath + 'js/handlebars/foo.js' to load scripts and images the pull from the phone's filesystem.

Must have taken a long time to figure out this solution @Ken!

ios - InAppBrowser inject script (executeSript) - Stack Overflow

ios cordova inappbrowser
Rectangle 27 0

ref is defined on the cordova webview, but the inAppBrowser has it's own webview and ref isn't defined there, so you can't close inAppBrowser like that.

I haven't tested this, it's a bit hackish, but might work:

ref = window.open(tile.typeContentUrl_en, '_blank', 'location=no');
    ref.addEventListener('loadstop', function(data, err) {
      ref.executeScript( {
        code: 'document.getElementsByTagName("body")[0].addEventListener("click", function(){ alert("clicked");window.location.href = "close"; });'
      }, function(){
        console.log('script injected');
      });
    });

    ref.addEventListener('loadstart', function(event) {
        if(event.url.indexOf("close") > -1) {
            ref.close();
        }
    });

I checked this But I dont know how the loadstart callback is not getting called. Any idea?

I've just tested it and it works, but I had to change the if on the loadstart, because the window.location.href = "close"; redirects to the currect page /close, not to an empty page with just close as the url, so check that the page contains close on the url

Cordova InAppBrowser: close inappbrowser instance from script injected...

cordova inappbrowser
Rectangle 27 0

I'm not sure if this is built in yet, however, you can pretty easily inject your own custom scripts inside the page that you open up with InAppBrowser, at least on Android (not sure about the other platforms at the moment.) This feature hasn't been documented yet, but there are tests for it in the mobile-spec test suite and it looks pretty easy: https://github.com/apache/cordova-mobile-spec/blob/master/inappbrowser/index.html#L165 They are just calling inAppBrowser.injectScript(). If you look on that page, you'll see that they are manipulating the external web pages' DOM pretty easily by injecting this code:

var code = '(function(){\n' +
              ' var header = document.getElementById("header");\n' +
              ' header.innerHTML = "Script literal successfully injected";\n' +
              ' return "abc";\n' +
              '})()';

and injecting it with: iab.executeScript({code:code},callback. I suppose you could do this to write events into a queue in a hidden DOM element in the external page and pull the events off this queue from your inAppBrowser to process them. It seems a little janky though. I tried injecting global variables that you could access from either JavaScript page but was not having much luck...there's probably SOME way to do this though, if I come up with anything I'll be sure to edit this post.

The first approach is pretty much what I suggested above. I'd use a hidden in the external page and write events/commands into it that you then read and interpret in the Cordova code. For the second approach, I don't understand what you are suggesting or why you would have to write different code for different platforms.

Sorry I don't really have any other suggestions. I think Cordova/PhoneGap is the best choice for you since it will be easy to create an app on multiple platforms with the same native functionality using the same set of Cordova API's across all of the platforms.

I think what you are trying to do (intercept JavaScript events from the external page opened in the InAppBrowser) is probably a pretty useful concept and idea. I have seen other people asking for this too. I think that if it is not possible already (it might be, I'll keep messing around with it) that there might be plans for it in the pipleine. You could create a feature request against Cordova for this functionality and see how well it is received.

Your approach is very interesting, so if I understood well, the return value of the injected script will be passed to the callback function ? My second approach can require more code because I won't be necessarily deploying to phonegap only, as I'm thinking of Unity web app and Pokki too as means of deployment. For example, i can add some endpoint like this /users/4/events that will output a JSON formatted message, and then longpolled it from the client, but I will have to support a separate code base for event managing on the various platforms (for instance PhoneGap, Unity Web App and Pokki)

Yes correct, in that example, "abc" will be passed back to the callback function.

I've just tested it and it works the way I was looking for ! Thank you for the lead !

Awesome, great to hear, you're welcome, and good luck!

Augmenting a webapp with native capabilities - Bridging PhoneGap's InA...

javascript ruby-on-rails cordova jquery-mobile