I tried to load a HTML page from my local path in Android using React Native's WebView, as follows.
var WebViewAndroid = require('react-native-webview-android');
But I am getting a blank page
<WebViewAndroid
ref="webViewAndroidSample"
javaScriptEnabled={true}
geolocationEnabled={false}
builtInZoomControls={false}
url={webapp}
style={styles.containerWebView}
/>
my local path is /storage/emulated/0/Android/data/'myappid'/files/abcd/index.html
Related
So, I have this project in react which is a map made with react leaflet and I'm trying to call it as a webview inside react-native, but its not working, it apears all blank webview called with react-leaflet on in
And its not the webview problem, beacause I can call other websites inside of it
Here I just changed the url to a youtube page
webview called of youtube page
here's my code `import React from 'react';
import {Text} from 'react-native';
import {WebView} from 'react-native-webview';
import {Container, mapurl} from './styles';
export function WebViewComponent() {
return (
<Container>
<WebView
source={{
uri: mapurl,
}}
/>
</Container>
);
}
`
Here is the leaftlet page that i'm trying to call, I made a deploy on vercel
https://map-webview-test-4xfd.vercel.app/
Application is not loading in safari 15 and higher versions, there are no console errors.
In chrome our application is being detected as angular application and the component is loaded as Angular widget component here
Where as in safari it is loaded as
Screenshots attached.
Source code:
<script>
var angWidgets = 'unauthenticated';
var cId = '#ViewBag.ClientId';
</script>
#{string angWidgetsHtml = "<unauthenticated></unauthenticated>";}
<app></app>
<script>
var angWidgetsHtml = "#Html.Raw(angWidgetsHtml)";
</script>
Inspect source code image in Safari
Inspect source code image in chrome
According to the Apache Cordova blog, iframes may not work using WKWebView. (https://cordova.apache.org/news/2018/08/01/future-cordova-ios-webview.html)
I have a Cordova application that is in the App Store that relies quite heavily on iframes. Since UIWebView is likely to be removed in iOS 13, is there a way to get iframes working using WKWebView?
Here's what I've done so far:
I tried using the Ionic WebView plugin (https://github.com/ionic-team/cordova-plugin-ionic-webview), and although it works for parts of my app it does not work on the iframe pages. Specifically, I'm getting Access-Control-Allow-Origin header contains the invalid value 'null'. I don't get this error using UIWebView.
Add this in your config.xml
<allow-navigation href="*" />
Then build your ios platform
I ran into this issue also in my Cordova apps, and have found a workaround. It involves writing content directly to the iframe, rather than giving it a src="...". This way, iframe runs as same-origin as parent.
(Iframes do work in WkWebView; it's just that anything loaded via src="file://..." [e.g. all local app files] are treated as unique-origin, so tends to screw up any cross-frame JavaScript.)
function frameEl_injectHtml(frameEl, injectHtml) {
// frameEl must exist in DOM before its contentWindow is accessible.
if (!frameEl.contentWindow) { alert("frameInjectHtml() but frameEl not (yet or anymore) in DOM."); return; }
frameEl.contentWindow.document.open('text/htmlreplace');
frameEl.contentWindow.document.write(injectHtml);
frameEl.contentWindow.document.close();
}
// Create <frame>, insert into DOM, and inject content.
var frameHtml = "<html><head></head>" +
"<body>" +
"iframe body" +
"<script>window.parent.alert('iframe even same-origin as parent.');</script>" +
"</body></html>";
var frameEl = document.createElement('iframe');
frameEl.src = "about:blank";
document.body.appendChild(frameEl);
frameEl_injectHtml(frameEl, frameHtml);
Add this to your Cordova config.xml
<allow-navigation href="http://*.yourdomain.com/*" />
It will allow your HTML pages, no matter root documents or children in the iframe, to redirect from localhost to a remote URL.
I have problems loading my local html in to webView in my Application heres the code -
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_weekly);
WebView ww = (WebView) findViewById(R.id.webViewer5);
ww.addJavascriptInterface(new myJsInterface(this), "Android");
ww.loadUrl("file:///assets/pro/index.html");
The Result from the App says:
Webpage Not available
the Web page at file:///assets/pro/index.html might be temporarily down or it may have moved permanently to a new web address.
The HTML file works fine alone or in a browser just not in the webViewer.
assets folder should be accessed using file:///android_asset. change to below:
ww.loadUrl(" "file:///android_asset/pro/index.html"); or ww.loadUrl(" "file:///android_asset/index.html"); (since i cant see your directory structure)
I am using Xcode 4 with PhoneGap (Cordova 1.6) and ChildBrowser. I've used SiteCrawler on OSX to successfully download a website and localize it, and it is fully browsable locally with images, PDFs, etc. I have moved all the localized site files into the PhoneGap www folder and the app test builds fine - the site is fully browse able.
I want the PDFs on the site to open in their own window, and ChildBrowser does this perfectly as far as my needs. Using http://blog.digitalbackcountry.com/2012/03/installing-the-childbrowser-plugin-for-ios-with-phonegapcordova-1-5/ I was able to get ChildBrowser installed and working - I have PDF files opening in the ChildBrowser.
My problem is that using the link above, I have to add ontouchstart="loadChildBrowser('/path/to/file.pdf'); return false;" to every PDF link on the site. Since we use a CMS, this isn't much of a problem - the bulk of PDFs are called from a template with data filled in from the CMS and they are fine. But there are some pages in the site where the client has added a link to an uploaded PDF into the content of the page. In this case, there is no easy way to add the above code to the inline link.
I figured that I can use jQuery to look at each a tag on the page when clicked and if clicked, run the ChildBroswer instance, and this would cover both types of PDF links, but I can't seem to get it to work. Here is what I have:
<script type="text/javascript" src="/a/js/cordova-1.6.0.js"></script>
<script type="text/javascript" src="/a/js/ChildBrowser.js"></script>
<script>
// install ChildBrowser
var cb = ChildBrowser.install();
//loading a web page in ChildBrowser
$('a[href$=pdf]').click(function() {
var href = $(this).attr('href');
cb.showWebPage(encodeURI(href));
return false;
});
</script>
Using the above with no inline link javascript, the PDF opens on its own, without child browser.
Using the below along with ontouchstart="loadChildBrowser('/path/to/file.pdf'); return false;", child browser will open, and for some links shows the PDF, and for others just says loading. I figure this is just tweaking for paths, but I think the above would be most universal if it can be made to work.
<script type="text/javascript" src="/a/js/cordova-1.6.0.js"></script>
<script type="text/javascript" src="/a/js/ChildBrowser.js"></script>
<script>
// install ChildBrowser
var cb = ChildBrowser.install();
//loading a web page in ChildBrowser
function loadChildBrowser(file) {
cb.showWebPage(encodeURI(file));
}
</script>
Through trial and error I was able to get this working for the most part. I'm still hitting a couple of unrelated bugs (well, related to Childbrowser but not the loading go local PDF files).
So, using ontouchstart="loadChildBrowser('/path/to/file.pdf'); return false;" on all links to PDFs on the site is still the way to go. What changed was the JS function I am using to determine the path to the PDFs and launch ChildBrowser. I had to do this:
<script type="text/javascript" src="/a/js/cordova-1.6.0.js"></script>
<script type="text/javascript" src="/a/js/ChildBrowser.js"></script>
<script>
// install ChildBrowser
var cb = ChildBrowser.install();
//loading a web page in ChildBrowser
function loadChildBrowser(file) {
var path = location.pathname+file;
var len = path.length;
var locleft = path.indexOf('/www/')+4;
var trim = len-locleft;
var left = path.slice(0,-trim);
var locright = path.indexOf('/assets/');
var trim = len-locright;
var right = path.slice(-trim);
var finalPath = left+right;
cb.showWebPage(encodeURI(finalPath));
}
</script>
in my included header file (so it lives in the head of every page on the site). The problem was that when ChildBrowser pulled up the path to the file, it was appending the part below the normal site's web root (/assets/documents/xxx.pdf) to the full path to the page being viewed in the app at the time, so I ended up with:
/var/users/name/blah/blah/www/page.html/assets/documents/xxx.pdf
when we wanted:
/var/users/name/blah/blah/www/assets/documents/xxx.pdf
The script above prepends location.pathname to the file var passed from the function (ontouch start) that calls ChildBrowser so that we end up with
/var/users/name/blah/blah/www/page.html/assets/documents/xxx.pdf (not correct)
It then splits it into a left section (everything before /www) and a right section (everything including and after /assets/) and then concatenates them (effectively removing all the site directory and html file information) and then calls ChildBrowser with that finalPath. Working for me.