I have created an application using Titanium Appcelerator in which I am using a webview to show some webpages. All the webpages to be displayed in the webview are HTML5 cache enabled, as I want the webpages to be available even when the application is running offline.
The problem which I am facing is that, the webview is not able to show the cached webpages when there is no network connection. But I have tested all the webpages in the browser, and all of them are working fine.
I am facing this problem for Android platform.
This is the code for the webview:
//FirstView Component Constructor
function FirstView() {
//create object instance, a parasitic subclass of Observable
var self = Ti.UI.createView();
var webview = Ti.UI.createWebView({
url: 'http://www.w3schools.com/html/tryhtml5_html_manifest.htm'
});
self.add(webview);
return self;
}
module.exports = FirstView;
The very url is working fine in the browser. How should I solve this?
you can use local html and it use jquery .ajax for load another webpage like that
//inside local page
<div id="pull"></div>
<script>
$.ajax({
url: "http://www.w3schools.com/html/tryhtml5_html_manifest.htm",
cache: true,type: "POST"}).done(function( html ) {
$("#pull").append(html);
});
</script>
Related
I'm developing a project for an app that will display my react app in a webview.
ReactJS app works perfectly in webview, that is why I assume JS is activated in webview.
But, I'm trying to display a base64 encoded HTML content which I'm trying to display as follows;
<iframe src={`data:text/html;base64,${HtmlContent}`}/>
This approach works fine in the browser (Chrome), but it's not working at all in the webview.
I used srcdoc instead of src. But then I cannot postMessage to parent ReactJS app.
Is there a way to work with srcdoc in this scenario or what could be the problem with the iframe when in webview?
Unfutenally I couldn't manage to work with this approach.
But, since I can control both and of the iframe, simply I created a function in the parent of the iFrame as follows;
useEffect(() => {
// Only create once
// Create a custom function and put it to the window object
window.handleResult = handler;
}, [])
Then access it from inside of the iFrame with;
<script type="text/javascript">
window.top.handleResult({success: params.success, error: params.error})
</script>
This approach worked better actually. If you need one more nested iframe for some reason, you can get this function no matter how deep it is because, iframe content geting "top" window anyway.
I'm sharing this because this problem can be solve with different aproches. Maybe not the best way but it'i a working way.
I am quite new to React-native. The href tag in HTML opens the website within the app. I wish to have it open the link in the default browser of the mobile phone/device. Oh and I use snack.expo.
In APP a website is being loaded. Within my website I use <a href> 'http://maps.google.com/?q=...' I wish to have the default browser of a mobile phone to open this link in its default browser, same goes for other href links.
Of course only links with target="_blank" should be opened in the default browser.
It would be even more awesome if app's can be opened.
I have searched google a lot, but without success.
Anyone who knows how to do this? Or is it simply not available, yet?
Within my HTML code I've tried this:
{address}
Part of react native code:
return (
<WebView
source={{ uri: '{website}' }}
/>
);
Best regards
It is definitely possible in react native. You can do it as follows:
import {Linking} from "react-native"
<WebView
source={{uri:"https://mashupguide.net/1.0/html/ch02s05.xhtml"}}
onShouldStartLoadWithRequest={request => {
let url = request.url;
if (url.includes("http://maps.google.com/")) {
Linking.openURL(url);
return false
} else {
return true
}
}}
/>
This will prevent the WebView from browsing to the next page and instead open the phone's default browser.
reference: https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md#onshouldstartloadwithrequest
working example: https://snack.expo.io/#ammarahmed/sadistic-almond
I need to hit an API endpoint, which returns a pdf file (not a url to a pdf, but the actual data), then somehow display this pdf in my ionic application. Ideally, I'd like to just give it to some other application like the phone's mobile web browser but I'd be open to trying to embed it within my app as well. On iOS, I just use $window.open(url) and mobile safari knows to download and display the pdf that is returned. However, Android tries to download the file then tells me that it can't be opened when I try to open it.
I've also tried embedding it in the app with <embed> but nothing gets embedded. However, a similar method works with images in <img ng-src="url">.
I've also tried messing around with cordova FileOpener2 but am having a lot of trouble getting anything to work in that. If that's the right way to do this, I'd be open to re-visiting that method.
The closest I've gotten is definitely just sending it to the devices mobile browser as that works perfectly on iOS.
I solved it using filetransfer and fileopener2. My code is below. The main issues I ran into was not having <access origin="cdvfile://*" /> in my config.xml file and not having ngCordova installed correctly.
if (ionic.Platform.isIOS())
$window.open(APIUrl, '_blank', 'location=no');
else if (ionic.Platform.isAndroid()) {
var fileExtension = filename.substr(filename.lastIndexOf('.')+1);
//I have a dictionary with this somewhere else
var MIMEType = extToMime[fileExtension];
var uri = encodeURI(APIurl);
var fileURL = "cdvfile://localhost/persistent/file."+fileExtension;
$cordovaFileTransfer.download(uri, fileURL, {}, true)
.then(function(result) {
$cordovaFileOpener2.open(
fileURL,
MIMEType
).then(function() {
console.log("SUCCESS");
}, function(e) {
console.log("ERROR");
console.log(JSON.stringify(e));
});
}, function(e) {
console.log("Error: " + JSON.stringify(e));
});
}
I am trying to open en external url from a local html file. For example, i am using super.loadUrl("file:///android_asset/www/index.html"); to call local file and the application opens it in the browser provided by DroidGap. However, there is a problem with the external url. In index.html, i am trying to reach http://www.google.com via an image button and the device opens another browser to show www.google.com (in my device, chrome is opening to show the page www.google.com). I want to let DroidGap browser to open both external and local urls in DroidGap browser.
I have achieved this because I needed the same solution. I assume you already know how to load the local file but just in case ...
//By "SomeLocalFile.html" I mean an html file in the /www/ folder of the actual app installation **not** on the server
var ref = window.open('somelocalfile.html', '_blank', 'location=no');
First Add and event listener like this to the main js of your app from which you are calling var ref = window.open().
ref.addEventListener('loadstart', LoadStart); // in YourMainJs.js
Then create a local file called closeInAppBrowser.html some where in your /www/ folder it just so happens that mines is in /www/pages/
Now define the LoadStart function so that when the page starts to load LoadStart() will fire
//I use match(/[^/]+$/g) because I find that matching the file name is just easier than the path.
// This code is place in in YourMainJs.js
fileName = event.url.match(/[^/]+$/g);
if(fileName[0] == "closeInAppBrowser.html"){
// alert("fun load stop runs");
ref.close();
}
Now in the SomeLocalFile.html that you are going to use window.open() with, place a link and js like this.
// in SomeLocalFile.html that was called via the window.open()
<a class="close">Close This Window Like A BOSS!</a>
$('.close').click(function(){
//We use window location cause you can't navigate to any other local file just by using an href in an <a> tag
//We aslo use ../../ because that is the correct path usage from within InAppBrowser to another local file
window.location = '../../pages/closeInAppBrowser.html';
});
Now when you click the link it will attempt to navigate to closeInAppBrowser.html this will trigger LoadStart() and it will check if the event.url file name matches "closeInAppBrowser.html" and if so it will close the window.
I have tested this and it works 100%. Let me know if you have any other questions
Actually there is no need to use child browser plugin, if you upgrade phonegap to 2.3.0 or above, so that you can use InAppBrowser
sample
var ref = window.open(authorize_url, '_blank', 'location=no');
ref.addEventListener('loadstart', function() { me.locChanged(event.url,ref); });
In a phonegap-android application i want to open an external link within the application.
For this i used a plugin childBrowser and it works fine.
But the external link is taking time to load for which i want to show a wait/loading message.
I also tried to open the external link through ajax-call, updating the div with the response page. and until reponse is not received i am showing a loading message but the problem with this approach is that page loses its styles and other structure.
I guess this is because i am putting entire external page inside the div tag which cannot render the entire page as the browser can do it.
Code snippet looks like-
<script type="text/javascript">
function loadPage(url) {
var xmlhttp = new XMLHttpRequest();
// Callback function when XMLHttpRequest is ready
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState === 4){
if (xmlhttp.status === 200) {
document.getElementById('container').innerHTML = xmlhttp.responseText;
}
}
};
xmlhttp.open("GET", url , true);
xmlhttp.send();
}
</script>
How can i achieve this, can I override childBrowser?
Also
if i want to open the page in applications' web view then how can i achieve the same for web-view.
EDIT: As per Same origin policy one cannot call to a outside domain using xhr request.
Okay understood. i checked in browser and got expected error: 'XMLHttpRequest cannot load'
But then how does it shows/opens the url in mobile?
Ofcourse the page is not fully functional and thats my original issue.
i would post this as a separate question, but its related to my original question
Thanx.
Any hints/suggestions would be great.