I'm looking to pass some config data from a webview to an app. I think the best way to do this is to link to a file that contains all the information. What's the best way to add the link to the web view page?
Is something like:
<head>
<meta name="my-app-config" content="http://my-app-ulr.com/config.xml">
</head>
Appropriate for the app to read? Or should I use a custom element in the header where I can pass more data if needed, such as:
<head>
<my-app type="config">http://my-app-ulr.com/config.xml"</my-app>
</head>
Is there an advantage of one versus the other for reading the web view content from the app?
I did this previously with meta tags, no issues to report yet. However, I structured it in this way:
<meta name="my-app-properties" content="things of interest to my app" my-app-config="http://my-app-ulr.com/config.xml" my-other-property="more things">
This seems more readable to me and gives you room to add and read more properties easily
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"
I getting the below error when trying to load some webpages
Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.
How do I solve it?
If you are using webview.loadUrl() method to load a web page make sure that elements in the content attribute in meta tag (of web page's html) should have its elements comma "," separated neither semi-colon ";" nor blank space, for example:
Like this:
<meta name="viewport" content="key1=value1,key2=value2,key3=value3"> //best practice
Not even this, though supported but not recommended:
<meta name="viewport" content="key1=value1;key2=value2;key3=value3">
Not even this, though supported but not recommended:
<meta name="viewport" content="key1=value1;key2=value2;key3=value3">
So, see meta tag in your html's head tag having name="viewport", it should have it elements (i.e. key=values) comma separated in its content attribute, so after fixing it should like this:
<head>
...
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
....
</head>
Ref: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Also see this similar thread: Android Webview - Scale image to fit screen properly with one loadUrl
I was able to solve this issue by implementing the below code:
webView_courseLesson.settings.javaScriptEnabled = true
webView_courseLesson.settings.loadWithOverviewMode = true
webView_courseLesson.settings.useWideViewPort = true
By default the javaScript support is turned off by the Android framework. Though you can check documentation here http://developer.android.com/guide/practices/security.html
For days...I try to find a solution to load a remote url with android webview. But with local css/js/images
But I couldn't.
I think it is impossible because of security issue... right?
I think mybe I could use a trick.
in remote server I just publish my webpage without <head> and <body>:
//<html>
// <head></head>
// <body>
... body code111 ... // there is only this part in remote url page
//</body>
//</html>
and then I create a index.html in android_asset folder:
<html>
<head>
<link css ...
<link java ...
</head>
<body>
... now put code111 here!
</body>
</html>
So now I can use local resource (in head)
I am new in android and java...I couldn't test it...but do you think is it possible?
well, let's start.
The easyer part is part B.
here you can find the answer:
Rendering HTML in a WebView with custom CSS
basically, what you have to do is have the html website on a String variable, ex:
String website = "<html><head>" + "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />" + <"javascript call to file that i don't remember right now"/>" + "</head>"
and then append to that website, your remote HTML code. you could do it via, for example, any of the Async HTTP libraries ( LoopJ's one is quite good loopj's http library ) .
and then append the rest of your website.
website += retrieved_website
website += "</body></html>"
finally load the website using the .loadDataWithBaseURL() method as explained in the accepted respose.
althought i have to say this is quite a complicated way of loading a website, this would be my approach.
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.
There is the html source code of the targeted iframe page
<html>
......
<body>
......
<div id="XXX"><p>**target**</p>
<div><p>**target**</p><span>**target**</span><p>**target**</p></div>
<p></p>
</div>
</body>
......
what i am going to do is to retrieve the data of which id="XXX" to my project(which means the four target as shown),is it possible to get the result by the method getElementById() from existing android library?Or any better suggestions? Thanks for advance
You can create a javascript function that would pass data from the browser to the activity using a javascriptinterface if your viewing this in a webview or a class that extends a webview. Its a little hard to tell what your trying to accomplish from just the little bit of code and info you posted.
You can use Jsoup HTML parser for android.