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
Related
I have a webpage which have a "viewport" tag with the following value:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I want to allow zooming on that page which is displayed in a WebView
so I inject some javascript on onPageFinished() as follow:
webView.loadUrl("javascript:document.getElementsByName('viewport')[0].setAttribute('content', 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes');");
but it doesn't work.
* I also tried rearranging properties like this
webView.loadUrl("javascript:document.getElementsByName('viewport')[0].setAttribute('content', 'user-scalable=yes, width=device-width, minimum-scale=1.0, maximum-scale=1.0');");
or removing the property like this
webView.loadUrl("javascript:document.getElementsByName('viewport')[0].setAttribute('content', 'width=device-width, minimum-scale=1.0, maximum-scale=1.0');");
with the same result.
after some trials I found out that I can override maximum-scale only if there was no "user-scalable=no" defined at all in the page.
for example if the Viewport metadata was like this:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
everything would work just fine.
I checked the value of the "viewport" tag after injection using javascript:alert(...), and it was modified by the injection, yet with no actual result.
I tried setting UseWideViewPort with true or false, and it didn't help neither:
webView.getSettings().setUseWideViewPort(true);
//or
webView.getSettings().setUseWideViewPort(true);
the samething with setLoadWithOverviewMode()
zooming doesn't work even programmatically using zoomIn() or zoomOut().
I've tested using android 2.3 and android 4.4.2 with the same results.
note: I did read almost all the questions on this site related to zooming and viewport, but nothing was useful in my case.
my webView settings are defined as follow:
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
So is there any other ways to allow zooming and override the metadata?
a solution which is compatible with API 10 would be very appreciated.
Very nicely asked. This code worked for me, despite being essentially what you stated didn't work, can't say why we are getting different results. You have to change the document's properties since the WebView respects those.
public void onPageFinished(WebView view, String url)
{
webView.loadUrl("javascript:document.getElementsByName('viewport')[0].setAttribute('content', 'initial-scale=1.0,maximum-scale=10.0');");
}
Can anyone please help me get the external page that the Cordova InAppBrowser loads on Android app to fit to the phone screen size ?.
I am invoking the inapp browser from a Sencha Touch app using the follwing code.
var opt = 'location=no,clearcache=yes,closebuttoncaption=Back,EnableViewPortScale=yes';
window.open('http://sg-prod-mobilityapi.cloudapp.net','_blank', opt);
When ever I invoke the url I get the following screen
Could anyone please help me out ?.
Add this code into your index.html
<meta content=
"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
name="viewport" />
If the external page fit to the browser viewport, it should have a responsive design. I gone through that url, in that the middle div is set with fixed width and height of 340x380 px. you can only enable the zooming in in app browser.
Also phonegap allow you to execute some scripts after loading the url, just like injecting scripts.
var iabRef = window.open('http://sg-prod-mobilityapi.cloudapp.net', '_blank', 'location=yes');
iabRef.addEventListener('loadstop', replaceCustomStyle);
function replaceCustomStyle() {
iabRef.executeScript({
code: "var itm = document.querySelector('#Main div');
itm.setAttribute('style','width:100%');"
}, function() {
alert("Element Successfully Hijacked");
});
}
Try this and it is documented here
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
I created a sample script to add and remove metatags from the head. But Android 2.2 doesn't seem to respect it's removal. However it does respect the addition of the metatag on click for example.. How do I get it to respect the removal of the tag and revert to the default viewport through javascript?
<script type="text/javascript">
$(document).ready(function(){
function initMeta(){
var headID = document.getElementsByTagName("head")[0];
var metaNode = document.createElement('meta');
metaNode.name = 'viewport';
metaNode.content = 'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0';
metaNode.id = 'metatag';
headID.appendChild(metaNode);}
function closeMeta(){
$("#metatag").remove();}
$("#add").click(function(){initMeta();alert("meta opened");});
$("#del").click(function(){closeMeta();alert("meta closed");});
});
</script>
<input name="add" type="button" value="add metatag" id="add"/>
<input name="del" type="button" value="delete metatag" id="del"/>
I note this behavior in iOS Safari too.
You are actually removing the meta tag (verifiable through DOM - Try alerting $("#metatag").length after removal)
The problem is the viewport itself does not respond to the absence of content in this tag. If you update the contents or re-add the meta tag with new contents, you should see it manifest on your screen. But by simply removing the meta tag, the UA seems to think "No change necessary" as it's not getting any explicit instructions there.
Hope that helps! Your question / example helped me realize this was even possible!
I have a WebView which may contain data that appears to be getting "auto linked". Something that looks like an email address is becoming clickable, even though it's now within an <a> tag or has an onclick attribute. How do I disable this auto-linking?
I've looked thorugh the WebView docs, as well as the WebSettings docs, but didn't seem to see anything that mentions this behavior.
alt text http://beautifulpixel.com/assets/5554_Fast-20100706-110228.png
I know this is a bit late, but for future reference, this might be a solution that will work regardless if the links are auto created or defined in the <a>-tag.
myWebView.setWebViewClient(new WebViewClient(){
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// return true; // will disable all links
// disable phone and email links
if(url.startsWith("mailto") || url.startsWith("tel")) {
return true;
}
// leave the decision to the webview
return false;
}
});
To do all the email addresses, add a meta tag:
<meta name="format-detection" content="email=no" />
You can also disable physical address and telephone detection:
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="address=no" />
In my own application, though, I needed PhD's solution to prevent only one email from being linked.
I had the same problem, tried this:
<a onClick=\"return false;\">jorgesys#elnorte.com</a>
it did not worked.
Then tried this:
<a href='javascript:void(0);'>800-644-9737</a>
and it did the trick
Hi Squeaggy why you do want to eliminate that funcionality from the webview, but well a tricky way would be including onClick="return false;" in the anchor tag that contains the email or URL.
<a onClick=\"return false;\">jorgesys#elnorte.com</a>
That appears to be unchangeable functionality of the WebView.
You could do the opposite of this Is there any way to have WebView auto-link URLs and phone numbers in Android? and create a javascript link stripper (instead of the proposed link injector there).
Not sure what else would work for this.