I attempted to parse html and some portion of that dynamically generated by javascript. Using javascriptInterface with WebView worked fine on pages that used normal javascript. However, when I attempted to do same approach on pages that were controlled by angularJS, it didn't work -- data from angularJS didn't get populated. For instance,
<span class="s1">
<span class="s2">
<em class="ng-binding">{{ someVariable }}</em>
</span>
</span>
Inside curly bracket, the variable should be resolved by angularJS and its value was visible when I inspect web app through web browser. But html I saw on while processing html in javascriptInterface was following:
<span class="s1">
<span class="s2">
<em class="ng-binding"></em>
</span>
</span>
What my guess is the page was not fully loaded even with JavascriptInterface. Is there any other way to get fully loaded page from webview?
Related
Scenario:
I'm using Android Robotium Solo (v5.6.3) to automate web page interactions within my app. I need to automate data entry into INPUT fields that are contained within an IFRAME but I do not have much luck!
The Problem:
When I attempt to use, for example, solo.waitForWebElement(By.id("room-number", 5000, true) and solo.typeTextInWebElement(By.id("room-number", "101"), solo is unable to locate the element.
The discussion on this related issue "Accessing an iFrame inside a WebView #794" (https://github.com/RobotiumTech/robotium/issues/794), suggests that it's possible to use "solo.getConfig().webFrame = XXX" to focus solo on the content of a specific IFRAME and then access the WebElements. Unfortunately, I've not been able to get it to work and haven't been able to find any full examples. I assume XXX might need to be the "id" of the IFRAME but in my scenario (where I don't have control of the source code for the web pages being automated) the IFRAME tag has no id assigned.
I've created a simple example test scenario:
index.html - the main page that hosts the IFRAME
<html>
<body bgcolor="#AA3333">
<div id="wrapper">
<iframe src="embed.html" width="100%" height="100%" frameborder="0"></iframe>
</div>
</body>
</html>
embed.html - the source for the IFRAME that contains the INPUT element.
<html>
<body bgcolor="#3333AA">
<div id="page-container" style="height:100vh; width:100%;">
<label>Room Number</label>
<input type="text" name="ROOM_NUMBER" id="room-number">
</div>
</body>
</html>
After reviewing the source code for Robotium in more detail I confirmed that using
solo.getConfig().webFrame = ['id' of IFRAME as a String]
allows subsequent calls to solo.typeTextInWebElement etc. to work OK as expected.
The trick in my scenario is that the parent page assigned no id to the IFRAME so I programatically assign one at runtime using the following javascript
document.getElementsByTagName("iframe")[0].id = "test";
and then use
solo.getConfig().webFrame = "test"
How to get value from html from webview using getelementbyid.
I tried several different solutions. I tried with jsoup but i cant reach targeted page becouse user need to be signed in to get to page.
This is input form, i need value data from form
<input class="form-control" id="coupon_code" name="" size="50" type="text" value="https://app.webexample.com/invite?coupon_code=6f7c0f">
also i tried to implement #JavascriptInterface but it does not work
I am creating a very simple WebView application on android. However, I want to edit the html file before displaying it in the WebView.
For example, if the original html source looked like :
<html>
<body>
<h1> abc </h1>
<h2> abc </h2>
......
<h6> abc </h6>
</body>
</html>
And I want to change it to:
<html>
<body>
<h1> cba </h1>
<h2> cba </h2>
......
<h6> cba </h6>
</body>
</html>
(all "abc" become "cba")
And then, I want to display that new code in my WebView. How can I do this? thanks
I am not sure why do you need this and what kind of app it is to need this. But if you have to do it check foll code:
$(function() {
for(var i =0;i<101;i++) {
if(jQuery('h'+i).length)
jQuery('h'+i).html(jQuery('h'+i).html().split("").reverse().join(""));
}
});
First, a note on your header tags: <h100> is a common misconception for newcomers. <h_> tags are simply an organizational item for your page, and only go out to <h6> You can have multiple <h1> tags on the same page, which are just headings for that section of content (with <h2> implying a subsection of <h1>, etc).
From there, when you say "original source", I assume you mean this is your own code, correct? Not a WebView sourced from another site? If this is the case, and you are only looking to change a specific instance of a specific string in your own code, a Find and Replace should be sufficient via any text or code editor you are using.
But if this is the case, you might want to look into first learning HTML and being able to render it in a basic web browser before moving on to also trying to learn Android.
I have such HTML
<body>
<p>https://www.google.com</p>
<p>foo#bar.com</p>
</body>
Is there any way to tell WebView to auto linkify content, and render like if it was:
<body>
<p>https://www.google.com</p>
<p>foo#bar.com</p>
</body>
Short answer: No. WebView is a web browser, so it will render a html page. Your html page does not include links, so why would WebView alter it?
Long Answer: You can intercept the page loading using a WebViewClient then inject a javascript that linkifies the page. There are tons of JQuery-based scripts around. But mind that this method won't be bullet-proof and will depend on the loaded page structure. For something as simple as your example it will be very easy, but if you add HTML5 , dynamic content, Iframes, asynchronous content ... things start to get complicated.
I am trying to develop in an application, which is based on Phonegap and JQuery Mobile framework.
I have created a Page and Sub Page as separate HTML files.
The body part of the index.html file will look like:
<div data-role="page" id="p1" **data-theme="e"**>
<div data-role="header">App Name</div>
<div data-role="content" class="fit-content"><br/>
<ul data-role="listview" data-inset="true" data-filter="true" data-icon="star" data-iconpos="right" data-transition="slide">
<li>Link1</li>
<li>Link2</li>
</ul></div></div>
The body part of page2.html file will look like:
<div data-role="subpage" id="p2" **data-theme="e"**>
<div data-role="header">Places</div>
<div data-role="content" class="fit-content"><br/>
<ul data-role="listview" data-inset="true" data-filter="true" data-icon="star" data-iconpos="right" data-transition="slide">
<li>Go Back</li>
</ul></div></div>
The data-theme="e" is successfully getting applied to index.html, whereas it is not getting applied to page2.html. Can someone please provide me with the reasons, for this behavior..?
I am using JQuery 1.8.3 and JQuery Mobile 1.2.1 version and I am properly calling the CSS and JS versions from local storage in both the HTML files (ex: /android_asset/www/css/jquery.mobile-1.2.1.css, ex: /android_asset/www/js/jquery-1.8.3.js/)
Also, another question lingering in my mind is, I am unable to call
the CLICK event for Link1, when I keep the body content of page2.html
in the same HTML file as index.html, as a SubPage; upon click on Link1, I am not redirected to Page2.html, even though I give href="#p2", instead of href-"page2.html#p2".
Provide data-ajax="false" in list divider of index.html. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. As per this link,
"Providing data-ajax="false" is critical because Ajax pages use the
hash (#) to track the Ajax history, while multiple internal pages use
the hash to indicate internal pages so there will be a conflicts."
Also, rename data-role="subpage" to data-role="page". This is the solution to this problem.