Rectangle 27 3

Yes, you can call executeScript in a WebView:

Although this is not the most practical way of doing what you need. If possible, I would rather convince the server side developers to generate a JSON feed of the data and having your Packaged App XHR'ing it in and formatting it appropriately.

UPDATE: if you only need to reformat the Webview content, you can also use the simpler insertCSS method:

var wv = document.querySelector('webview');
wv.insertCSS({code: "body { background-color: black;}"})

unfortunately i do not have access to the mysql php portion of the system to print out json as this would be an ideal solution. But I do appreciate the code above as this is exactly what I needed thank you!

Hey @mangini, any news options here? Injecting script to drive form filling is quite painful.

In fact, the question was about webview content re-format, not form filling. I've updated the answer to include the insertCSS method, which is a much simpler way of doing it (at the time of the original answer, insertCSS wasn't available to Chrome Apps).

Possible to Manipulate Chrome app "webview" dom with javascript/jquery...

javascript jquery webview angularjs google-chrome-app
Rectangle 27 0

For those who fall into such a case: I changed how the loadImage method functions to one that converts a file received into bytes

Steps: 1. Read a file from android and send the path over to the js function 2. Pass the path to a reader and when the reader loads the file, the onLoadEnd method gets called 3. Convert the file to bytes using the code

var stringToReplace = reader.result;
stringToReplace = stringToReplace.replace('data:base64,','data:image\/jpeg;base64,');
  • Set the image source to the string obtained in #3.

SOLVED Display local android image in a webview using javascript or jq...

javascript android jquery html5 android-webview
Rectangle 27 0

The answer is that you have to force the app to wait (try it, place a breakpoint at your webview, and then let it continue, you'll see the webview will load with javascript this time, reliably. Whereas if you just let the app load without the breakpoint, it frequently "skips" the javascript). Some sort of forced threaded wait method is needed.

A second method is to force the javascript to load after the page is loaded, as shown by the author's answer here android: webview not loading javascript with custom WebViewClient

jquery - Android webview javascript only loads sometimes - Stack Overf...

javascript jquery android webview
Rectangle 27 0

This problem made the reason is jquery-mobile limits the minimum height of the screen. In portrait screen min-height is 420px, In landscape screen min-height is 300px. When webview height is modified to 410px, more about 10px blank block at the bottom.

media screen and (orientation: portrait){
  .ui-mobile, .ui-mobile .ui-page {
    min-height: 420px;
  }
}
media screen and (orientation: landscape){
  .ui-mobile, .ui-mobile .ui-page {
    min-height: 300px;
  }
}

Overwrite or remove css rules can fix this issues.

<html style="min-height:0px">
html{
  min-height: 0px !important; 
}

This is absolutely correct, but for those who think you can just put it in the <body> and be fine, you're wrong! It doesn't work there, but it does when you put it on <html>!

javascript - Wrong height in iPhone simulator when webview resize usin...

javascript iphone cordova jquery-mobile
Rectangle 27 0

var $div = $('div#something');
$div.load("test.html");

I know it sounds like a simple answer, but it seems to me like my issue is related to Cocoa's WebViews and not jQuery. Your code is equivalent. Thanks anyways.

javascript - jQuery .load is not loading a local html file inside a Co...

javascript jquery html osx cocoa
Rectangle 27 0

A nice little work around just replace home.html with your local html file and content with your div id

document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';

javascript - jQuery .load is not loading a local html file inside a Co...

javascript jquery html osx cocoa
Rectangle 27 0

Thank you for answering, I tried the said plugins but it did not work.

javascript - Jquery keydown() with number format not work correctly on...

javascript android jquery html webview
Rectangle 27 0

I don't understand your second part of your statement regarding not being able to use jSoup because the URL is the same? Can you explain that better?

In any rate to pull the links out using jSoup is really easy.

Document doc = Jsoup.parse(pageHTML);


    Elements pageLinks = doc.select("div#dl_links a");

    ArrayList<String> theLinks;
    theLinks= new ArrayList<String>(pageLinks.size());
    if (pageLinks.size() > 0) {
        for (Element lnk : theLinks) {
             if (lnk.attr("style").contains("display:none"))
             {
            theLinks.add(lnk.attr("href"));
              }
        }
    }

You could also probably shorten the results by doing something like...

doc.select("div#dl_links a[style*=display:none]")

Since your needing to get the information after a javascript press then your going to want to do something like this...

WebView.loadUrl("javascript:(function() { document.querySelectorAll(\"button[type='submit']\")[0].click();})()");

The above would click the item that needs to be clicked so the new HTML will be shown. You might need to do a pause or thread sleep to make sure the new text has been shown. The program is the WebView doesn't have a great way of allowing you to just read the new HTML, so you will need to look into those ways if you need to wait until that specific text is on the page if it takes a while for it to load on the page after pressing the button.

This isn't an "easy" task. You would want to refer to this page for ideas and concepts: how to get html content from a webview?

Once your done returning the HTML, then you would just do the jSoup over the page's HTML.

Thank you so much! So what i mean is after loading the page, the website url stays the same. When I load the page to get the download link, the page content changes with javascript so everything else stays the same and only the download link is added to html. And this is a website that already exists so I can't change anything.

If you mean you can't change the page's javascript, then yes you would want to use jSoup since you just load the HTML after the page has been fully loaded then you can just pull the results without having to do any javascript on the page.

Please mark this as answer or upvote if it helped you out for others.

I don't think I'm stating my problem correctly.. What I meant was that when the page is loaded with javascript, the url of the page doesn't change therefore if I use jSoup, i can't get the download link because it's not there. the download link only appears after I click a button and the javascript code is executed..

javascript - Filter DOM elements in Android WebView without jQuery - S...

javascript android html
Rectangle 27 0

You may refer with this thread. You're encountering an error Uncaught ReferenceError: $ is not defined. maybe because you are calling the ready function before the jQuery JavaScript is included. You should put the references to the jQuery scripts first.

Ah see, normally you would be correct, but in this case, the data encoded HTML file actually has <script> tags that load jQuery (a local copy of the library) before a block of javascript in the HTML page. Hence my question. If loaded in an <iframe> for example, the HTML is fine, and jQuery is loaded as it should be, before my block of script.

javascript - HTML loaded into Webview as data string, jQuery is undefi...

javascript jquery html webview google-chrome-app
Rectangle 27 0

  • IBM Worklight (based on PhoneGap, complete platform including security, analytics, ...), but not for free.

There are a lot tutorials about including JavaScript libraries using these frameworks. It's just as simple as adding the jQuery library to your application project and include it on your HTML page like you're used to (using <script> tags).

There is also a cloud service for PhoneGap where you just offer your HTML and web resources (JS, CSS) just like a simple web application and they build it. It's free for 1 app: https://build.phonegap.com/

I dont want my app as a hybrid app.. I want to know whether we can inject jquery into android like javascript.

A hybrid app is an app combinning native functionality with web technologies (using Android WebView). As far as I see, your app is integrating JavaScript (using webviews) with native technologies, that's a hybrid app if you ask me... .

javascript - How to use jquery in android webview - Stack Overflow

javascript android jquery webview android-webview
Rectangle 27 0

Okay, so the comment on your question basically sums it up. You need to add the js/css code into your assets files.

If you want an example, you can take a look at this sample project (I only load js code, but it's the same principle for css) here

To go over the general idea:

  • Make your webview use a custom WebViewClient (called MailWebViewClient in the example). You don't need a custom webview (as was done in the example) wv.setWebViewClient(webViewClient);
  • In your webview client, override the onPageFinished() method and load your javascript code in a string (src) view.loadUrl("javascript: " + src);

In the example, I'm loading a script that will resize all tables and images to fit inside the webview (a common requirement for android). There's also some haphazard linkify code (to identify and mark links). I wouldn't use the js code, since it's a little buggy, but it's a good example for the principle.

Akhil if i dont add the JS/CSS files (one linked in head section and body) in specific order, the page design breaks. As per your reply above if I use view.loadUrl("javascript: " + src); src contains rendered HTML output of aspx page, which contains link to JS/CSS files on my server. What does adding "javascript:" prefix to it does? Remember my MVC4 aspx pages are hosted on a live windows .net server. I am not following, kind of confused.

What I want to know is that, if I add files to asset folder. How do I add them to specific location inside the webpage that is loaded in webview. Since the file order matters.

I'm not sure why the order matters, and I'm fairly certain you can modify the code around that, but if that's what you want to do, you'll have to modify the html directly. To do this, you could parse the response to your initial GET request for the webpage. You could then, insert your code in the appropriate places and pass the new output to be rendered in a webview. It'll be a little slower than a standard webview, but not by much

Order matters because file are dependent, like I can't load jquery mobile lib before loading jquery. The whole point of using local file is to improve the speed of design getting applied and page load. I could think of one solution which is caching static content. Its better compared to what I had already but still not fast enough. Thanks though :)

javascript - How to apply Css/JQuery files to an external page inside ...

javascript android jquery css asp.net-mvc-4
Rectangle 27 0

put All Css and JS in assets folder.

and try to load web view with :

webView.loadDataWithBaseURL("file:///android_asset/", <HTMLDATA> ,"text/html", "UTF-8", null);

This looks like a option, but how can I specify the order in which files should be loaded and applied. The sequence is as follows 1) jquery.mobile.theme-1.4.3.min.css 2) jquery.mobile.icons.min.css 3) jquery-ui.datepicker.min.css 4) jquery.mobile.structure-1.4.5.min.css 5) jquery-1.11.1.min.js 6) jquery.mobile-1.4.5.min.js is this possible?

javascript - How to apply Css/JQuery files to an external page inside ...

javascript android jquery css asp.net-mvc-4
Rectangle 27 0

You may refer with this thread. You're encountering an error Uncaught ReferenceError: $ is not defined. maybe because you are calling the ready function before the jQuery JavaScript is included. You should put the references to the jQuery scripts first.

Ah see, normally you would be correct, but in this case, the data encoded HTML file actually has <script> tags that load jQuery (a local copy of the library) before a block of javascript in the HTML page. Hence my question. If loaded in an <iframe> for example, the HTML is fine, and jQuery is loaded as it should be, before my block of script.

javascript - HTML loaded into Webview as data string, jQuery is undefi...

javascript jquery html webview google-chrome-app
Rectangle 27 0

You can read the file and execute it directly via loadUrl("javascript: your_script )

@Override  
public void onPageFinished(WebView view, String url)  
{  
    webview.loadUrl("javascript: your_script");  
}

I tried it (both loading the url or typing the code), but it doesn't work.. When i click on a link it doesn't show the new page, like if it overloads the HTML page loading with the .js file loading ..

I mean, i want to import Jquery file in every page, if i override the "loadUrl" method, then the webview will show the JQuery random code..

.loadUrl("javascript: (function(){ your_script })();");

Ok i can use this strategy when i want to execute a function, but i want to import JQuery, so if I load that url the WebView will redirect to the page containing JQuery, which is not what i want to do..

jquery - Import Javascript on every page displayed on my Android WebVi...

javascript jquery android webview
Rectangle 27 0

If jquery loaded in this page, you can just call this:

webview.setWebViewClient(new WebViewClient() {  
    @Override  
    public void onPageFinished(WebView view, String url) {  
        webview.loadUrl("javascript:(function() { " +  
                    "$("#myAnchor").click(function(event){}" +  
                    "})()");  
    }  
});

I can't modify the HTML code of the pages because i connect to websites which are not mine. So, loading a webpage from the web, how can i use Jquery?

Android - Javascript: how to execute jquery in webview - Stack Overflo...

javascript android jquery webview
Rectangle 27 0

use the viewport tag in the html head

<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densityDpi=device-dpi" />
EnableViewportScale
true

I've tried, viewport tag can not solve this issue. Use parameter height=device-height height becomes 480, but webview height of only 410. Thank you for your answer.

The bottom of the blank region changing large. screenshots

change the initial-scale value then?

initial-scale

javascript - Wrong height in iPhone simulator when webview resize usin...

javascript iphone cordova jquery-mobile
Rectangle 27 0

WebViews don't allow JavaScript by default. To run a web application in the web view, you need to explicitly enable JavaScript by adding the following lines to the onCreate method:

// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

I have already done this. That is y when I use a javascript code, it works perfectly fine

javascript - Injecting JQuery into Android Webview - Stack Overflow

javascript android jquery webview language-translation
Rectangle 27 0

you have to first define listener for typing and copy-paste like below (not required) :

$("#phone").keyup( function() {
    maskLine(this);
});
$("#phone").change( function() {
    maskLine(this);
});

Then, to manage cursor placement, you have to cache previous phone number and then, you could compare difference and update cursor position if needed. So declare, you have to declare a global array like this :

var _cacheElementValues = new Array();

At last, you can check the function below, it applies your mask to phone number field and manage cursor placement :

function maskLine( element ) {
    element = $(element);
    var maskedLine = '';
    var line = element.attr('value');

    // check the cache of the input and abord if no change since last treatment
    if (_cacheElementValues[element.attr('id')] != undefined && _cacheElementValues[element.attr('id')] == line) {
        return;
    }
    line = line.replace(/\D/g, ''); // remove all characters != digits
    line = line.substring(0, 10);
    if (line != '') {
        // apply mask
        if (line.length <= 2 ) {
            maskedLine = "(" + line;
        } else if (line.length < 6) {
            maskedLine = line.replace(/^([0-9]{3})([0-9]{0,3})/g, '($1) $2');
        } else {
            // mask : '(XXX) XXX-XXXX'
            maskedLine = line.replace(/^([0-9]{3})([0-9]{3})([0-9]{0,4})/g, '($1) $2-$3');
        }        
    }

    // define cursor position at the end of the input by default
    var pos = maskedLine.length;

    // Change cursor placement if necessary
    if (typeof element[0].selectionStart != 'undefined') {
        var start = element[0].selectionStart;
        var end   = element[0].selectionEnd;
        var insText = element[0].value.substring(start, end);

        // get current cursor placement
        if (insText.length == 0) {
            pos = start;
        } else {
            pos = start + insText.length;
        }

        // find how many digits typing since last mask application
        var previousLength = 0;
        if (_cacheElementValues[element.attr('id')] != undefined) {
            previousLength = _cacheElementValues[element.attr('id')].replace(/\s/g, '').length;
        }
        var diff = maskedLine.replace(/\s/g, '').length - previousLength;

        // if sum of new typing digit is > 0 : we change cursor placement
        if (diff > 0) {
            pos += (diff - 1) + Math.round((diff-1)/3);
            if (pos%6 == 0 && maskedLine.length >= pos+1) pos++;
        }
    }

    // update input data & cache
    element.val(maskedLine);
    _cacheElementValues[element.attr('id')] = maskedLine;

    // update cursor placement
    element[0].selectionStart = element[0].selectionEnd = pos;    
}

I hope this little explantion can solve your problem ;) Enjoy !

Thank you for answering but It does not work on andriod very well. I tried to input the first digit "9" and it renders "(9" but then the cursor was in the middle of "(" and "9".

@JeffRobertDagala Did you try to log the cursor detected position ? to know why the position is'nt good. Perhaps, it's not the detection of the position but the update of the new one.

javascript - Jquery keydown() with number format not work correctly on...

javascript android jquery html webview
Rectangle 27 0

You could save the file on the Cocoa side of things by intercepting a click on a link inside the WebView using a WebPolicyDelegate. I've accomplished this in a project using the following delegate method:

- (void)webView:(WebView *)sender
        decidePolicyForNavigationAction:(NSDictionary *)actionInformation
        request:(NSURLRequest *)request frame:(WebFrame *)frame
        decisionListener:(id<WebPolicyDecisionListener>)listener

When it comes to sandboxing, it really depends what you are going to do with that file. If I'm not mistaken you can easily save files within the sandbox (e.g. NSApplicationSupportDirectory) and in case you're presenting a file dialog, the sandbox will be handled automatically.

Awesome answer! Thanks a lot! ;-)

jquery - Saving file locally from JavaScript in WebView - Stack Overfl...

javascript jquery objective-c cocoa webview
Rectangle 27 0

Have you tried to clear the cache and clear the history of the webview? I got my javascript to start loading again if I called those two right before I call loadUrl.

jquery - Android webview javascript only loads sometimes - Stack Overf...

javascript jquery android webview