In my application i use a mix of html and native. In my web view i load a html page which has a which has an image in it. On click of the image i call a java script function which in turn calls the native code. My html tag is as below:
<img onclick=nextLevel('0'); id="d2">
My javascript method is as below:
function nextLevel(index)
{
Android.displayNextLevel(index);
}
Within the displayNextLevel method i start the next activity. The issue is when i click on the image on the html page multiple times the event gets triggered multiple times and the activity opens up multiple times. Am i missing out on something? How do i overcome this issue? Kindly help me with this. Thanks in advance.
I guess you could fiddle around in the html/js to make sure you can only click it once every now and then.
You could also ditch your function and instead use the JavascriptInterface so you can handle stuff in your Java code instead.
Related
I load an HTML string directly into a WebView with loadDataWithBaseURL(null, html, null, null, null) and later I'd like to be able to scroll programmatically to an internal element, e.g. <p id="pos1"> or <a name="pos1"></a>
I found a similar question, where the answer was to use javascript:
https://stackoverflow.com/a/2239301/2534762
But is that really the only way? Isn't there another simple way to say directly to a WebView: "go to #pos1" without having to embed a script in every HTML page that you want to scroll? It seems to me a common task begging for a simple solution, but apparently I'm wrong... or is there a way to do that, maybe calling loadUrl or loadDataWithBaseURL in some particular way?
I found that I don't need to embed JavaScript in the HTML page, as suggested in that other answer, I can instead write one line of JavaScript directly in the URL:
webView.loadUrl("javascript:document.getElementById('"+aID+"').scrollIntoView()");
I am developing a sample app using phonegap with the jQuery mobile plugin for android. I created a page, main.html. From main.html, I am able to catch the event. Once button is pressed in the main page, I change the contents using( $.mobile.changePage("path") ) function to signup.html. I have button in signup.html but when I click that button click event does not get fired. I have loaded all the js file in signup.html as well. what am doing wrong? Please guide me.
Clarification: Should I keep only one html (main.html ) and through that I have to do page navigation.?
In case your second page javascript is placed inside a HEAD content
If I understood you correctly, you are using ajax to load this page into the DOM? If this is true then I understand your problem. You see, when ajax is used for page loading only BODY content is loaded into the DOM.
You can fix your problem if you initialize your second html page javascript inside a first HTML file or move your SCRIPT block inside a second HTML BODY content.
Also, I have described this problem in my other ARTICLE with more details and few examples, or it can be found HERE.
In case you have several buttons with a same id
This could also be a little different problem. You see, if you have 2 buttons with a same id, they are both inside a DOM structure. If you try to bind a click event on a second page button, that same event will be bound to the button on a first page. Because they have a same id jQuery will bound an event to the first button (with that id) found in the DOM.
To fix this problem you need to use a jQM constructor called active page. One more warning, next code example will work only in a page events initialized after a pageinit event, for example pagebeforeshow or pageshow events:
$(document).on('pagebeforeshow', '#yourPageID', function(){
// Registering button click
$(document).on('click', $.mobile.activePage.find('#myButtonID'), function(){
// Do something
});
});
This line of code:
$.mobile.activePage.find('#myButtonID')
Will only get button '#myButtonID' found in a current active page, no matter how many other buttons with a same id exist inside the DOM.
Answer to the last question
About your last questions. It doesn't matter which template structure you use (1 HTML with multiple pages or multiple HTML's), you just need to worry about things I mentioned before.
Did you wrap your code inside following snippet?
$(document).on('pagebeforeshow', '#yourPageID', function(){
// Registering button click
$('#myButtonID').bind('click',function(){
$.mobile.changePage('yourfile.html');
});
});
if you just wrap it inside your <script></script> tag the event will not fire.
Did you get any error in the console? Check DDMS for it.
I am creating an android app in which, I want to call the function in the .java class from the
Html page on the button click. I'm not sure how to do that as i'm quite new to android. So, please help me.
You can create a Class and bind JavaScript in a WebView to its methods:
webView.addJavascriptInterface(new MyClass(), "my_class");
from JavaScript you caninvoke that method:
my_class.doStuff();
See Android Documentation for more info.
You Have to add one class in Android which will act as an Interface bridge between Html an Java. And in Callback method you will handle events from Html.
Add below code at java side to add interface -
webView.addJavascriptInterface(new ClassName,INTERFACE_NAME);
From javascript call
INTERFACE_NAME.method()
I have a custom html(suppose a.html) file which i am using from the resources and thus building a string with the entire document which is then passed to the WebView.
There's some text in a.html on click of which i want load another file b.html in the webview itself.
Please let me know what is the apporach to be followed here.
Step #1: Implement a WebViewClient, overriding shouldOverrideURLLoading().
Step #2: In shouldOverrideURLLoading(), load what you want -- this will be called on link clicks and redirects, and you are supplied the URL that ordinarily would be loaded.
I think if you set a WebViewClient and override shouldOverrideUrlLoading() then you can have the link loaded into the current WebView by returning false.
I use WebView for my Androind App. I got a problem and request a solution for help.
There is a textfield in the HTML page. When it gets 'focus' and then I call
mWebView.setFocusableInTouchMode(true);
in Java code so that the Android soft-keyboard will pop-up to let me key in.
The problem is I need using multi-thread for some processes in Java and call
mWebView.loadUrl(strJSCall);
as callback to execute JavaScript function, but the keyboard gets hidden!
The way I try is to force the keyboard to show again. But how can the keyboard always show when 'loadUrl' is called?
Dose anyone meet the same issue and solve it already?
Sincerely,
Jr.
The problem with loadUrl is that it interrupts the UI thread and will still close the input method. The only solid way to do this is to check what the cursor is on the webview, and override the default loadUrl behaviour on your webview.
Inside your custom webview:
#Override
public void loadUrl(String url) {
HitTestResult testResult = this.getHitTestResult();
if (url.startsWith("javascript:)" && testResult != null && testResult.getType() == HitTestResult.EDIT_TEXT_TYPE)
{
//Don't do anything right now, we have an active cursor on the EDIT TEXT
//This should be Input Method Independent
}
else
{
super.loadUrl(url);
}
}
This will prevent the native side from loading Javascript from firing when you have focus on a text field in webkit. It's not perfect but it avoids the mess of trying to figure out whether your text field is visible either by the resizing of the WebView. The Javascript executing in the webview should still work fine.
Again, if you need something to update while you're typing, you may have to find another way for Java to communicate with Javascript that doesn't block the UI thread. This is a hard problem that I still haven't solved properly yet.
I have the same problem and haven't fully solved it yet.
I have been able to force the keyboard to show after calling webView.loadUrl, first you need to find out if the keyboard is showing, I used a modified version of this How to check visibility of software keyboard in Android?
then call
InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
imm.showSoftInput(webview, InputMethodManager.SHOW_IMPLICIT);
But if like me you need to communicate with the JavaScript in the WebView after each key press then this approach causes the keyboard to flicker as it tries to animate up and down. It also misses some of the input depending on how fast you type.
In Android, executing javascript from WebView is one-way: calling WebView.loadUrl("javascript:sub(1,1)"); You can not get the return value directly.
There's a async way to get the JavaScript function return value:
How to get return value from javascript in webview of android?
But in most cases, we need a sync method instead of the async way. For example, while click event is passed into Android WebView's onTouch
method, we want to execute a JavaScript to reading the element information clicked on.
I have tried two solutions:
1. Use Java P/V variable to wrap a sync method from the async on, the solution looks like:
How to get return value from javascript in webview of android?
The solution is totally not working, because wait method will block the execution of JavaScript and JavaScriptInterface. So if we want to get the result of a js
method in a UI Thread. it's not possible.
Use Java Reflection to get the Native Interface of stringByEvaluatingJavaScriptFromString.
Exist stringByEvaluatingJavaScriptFromString for Android
Works very well, the only thing need to care is to initial reflection method when page loaded finished. I tried to initial the reflection inside constructor of WebView, but failed. I think the constructor is async method.