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.
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 got one strange behavior from JQM page.
I am using phonegap-android 4.4.2 with eclipse IDE.
Page code :
<html>
<head></head>
<body>
<div data-role="page" id="folfirstForm" data-dom-cache="true">
<link rel="stylesheet" href="../../css/follow_up.css">
<script src="../../js/addProdLine.js"></script>
<script type="text/javascript">
$(document).off("pageshow", "#folfirstForm").on("pageshow", "#folfirstForm", function() {
alert("First form loaded!");
AddElement();
});
</script>
----Some body----
</body>
</div>
</div>
</html>
You can see on code that I have put data-dom-cache="true" as per my requirement. I have also include the js file named as addProdLine.js which contains functions that i required, (for e.g. The AddElement() is from include file it self).
Now, when i am visiting this page first time all the functionality works very well. On second visit on same page I am getting the previous state of form which is expected as i have put data-dom-cache="true". But Might be due to data-dom-cache="true" my external js files are not being loaded on the second time visit on same page. I want, that on every visit ,my js file should run.
Jquery mobile only loads tag once when whole document is loaded. After the document is loaded if you will click on other links then only content part data-role=page will be refreshed through ajax along with data transition effect. Hence either add all your js script in a file and add it into head tag or stop loading other pages through ajax using following option:
<a href="#" data-ajax=”false”>Without Ajax</a>
But if you will disable content loading using ajax then link will work as it works in normal webpage and also transition effect will be not exist.
Edit:
One Alternate way could be: you can append some random values to the path of your JS files.
<script src="../../js/addProdLine.js?Q=<?php echo time(); ?>"></script>
I am trying to make "Highlighter" for epub reader in one my Android project using webview.
I am using Rangy for getting Selected text.
The serialize functions gives me this value after selecting text from the below sample HTML:
2/5/3/5/1/2:0,13/5/3/5/1/2:24
I am storing this in DB. When user returns to this page, i am retrieving the same selection and trying to deserialize but the deserialize function throws the following error:
Error in Rangy Serializer module: deserializePosition failed: node <DIV>[7] has no child with index 13, 0
I am getting why this is happenig??
Even i am trying to do the same thing using XPath but still the same issue.
<html>
<head>
<script></script>
</head>
<body>
<div id="mainpage" class="highlighter-context">
<div> Some text here also....... </div>
<div> Some text here also.........</div>
<div>
<h1 class="heading"></h1>
<div class="left_side">
<ol></ol>
<h1></h1>
<div class="text_bio">
In human beings, height, colour of eyes, complexion, chin, etc. are
some recognisable features. A feature that can be recognised is known as
character or trait. Human beings reproduce through sexual reproduction. In this
process, two individuals one male and another female are involved. Male produces
male gamete or sperm and female produces female gamete or ovum. These gametes fuse
to form zygote which develops into a new young one which resembles to their parent.
During the process of sexual reproduction
</div>
</div>
<div class="righ_side">
Some text here also.........
</div>
<div class="clr">
Some text here also.......
</div>
</div>
</div>
</body>
</html>
Any guesses??
you are probably using the following:
highlighter.highlightSelection();
rangy.serializeSelection();
if you are running highlightSelection before serializing it will not work.
this is because highlighting is actually wrapping text in tags which means that DOM is manipulated.
deserializing on original DOM will obviously won't work.
try change the order of commands so you will serialize first and only then use highlight.
Correct Order:
rangy.serializeSelection();
highlighter.highlightSelection();
My problem appears on the internal Android browser in combination with JQuery Mobile. When I reload the current page the content shrinks to fit text into the listview.
More in Detail:
The code works fine on IPhone, mobile Desktop Tools and Androids Firefox. However on the internal Android browser I have this weird issue with the code beneath. See my Edit below.
What I've tried so far:
I've played a lot with the viewport meta tag. Anyhow, I don't think that's the problem, because the content gets displayed correct on every other site in my app.
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
$('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');
like these posts suggest:
JQuery Mobile Device Scaling
Full webpage and disabled zoom viewport meta tag for all mobile browsers
My Code:
<html>
<head>
<meta name="viewport" content="width=650">
<!-- CSS and Scripts-->
</head>
<body>
<!-- Page Wrapper -->
<div data-role="page">
<section data-role="content">
<h2>
Code Sample
</h2>
<div class="ui-grid-solo">
<p style="margin-bottom: 38px;">
A
B
C
</p>
</div>
<!-- Dynamic content-->
<ul data-role="listview" data-inset="false">
<!-- Use ?id to grab and display data (CodeBehind.vb)-->
</ul>
</section>
</div>
</body>
</html>
Has anyone an idea, or did fight with a similar problem?
Edit:
I'm on to something, the problem appears to happen in this peace of code:
<!-- Dynamic content-->
<ul data-role="listview" data-inset="false">
<!-- Use ?id to grab and display data (CodeBehind.vb)-->
</ul>
Normally the listView replaces to big text items with "dot dot dot" at the end so that they fit on the screen. In my case it still does that, but the text has way to many characters, before the shortening is happening. The result is, that everything scales down. How should I solve this?
Since I got no answers on this one, I post my fix:
Only on mobile safari browsers listView items don't seem to get shortened. Now I'm calling a function which does that manually on pageinit:
fixListView: function () {
var brokenAgent = "Safari";
var currentUserAgent = navigator.userAgent;
if (currentUserAgent.indexOf(brokenAgent) != -1) {
var listItemList = $('.long-text');
for (var i = 0; i < listItemList.length; i++) {
var text = listItemList[i].innerText;
if (text.length > 40) {
var newText = text.substr(0, 40);
listItemList[i].innerText = newText + "...";
}
}
}
}
Still not that happy with my fix, any ideas for improvement are welcomed!
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.