PhoneGap + JQuery Mobile + Transitions + Multiple HTML files = "Error Loading Page" - javascript

I´m developing a PhoneGap application (HTML5 + CSS3 + Javascript/JQuery Mobile). I´ve started using a single HTML file with multiple pages. I´m using page transitions (Slide) on changing among pages.
The problem occurs when I break the single HTML page in multiple HTML files (one for each page). I cannot load the pages. The framework display "Error Loading Page".
I know that JQuery Mobile framework uses AJAX to load the page contents when using multiple html files. If I deploy the app in a web server (say IIS) everything goes fine. But running in local files - like PhoneGap apps demands -, the framework cannot perform an AJAX request, and consequently the page cannot be loaded "Error Loading Page".
I need to use JQuery Mobile
I need to use page transitions (slide) to improve user experience
I want to use multiple HTML files to not have to deal with a unique huge html file
The app will not be deployed to a web server because it is a PhoneGap App and must run locally in file system.
I´m deploying the app in an android and using the Adobe Build to generate the APK installation file.
Could someone give some advice?
Thanks!

I have solved my problem.
I was thinking that the PhoneGap would behaves like loading a page directly from file system and not allowing AJAX requests. In my tests on desktop I cannot load external links "Error Loading Page". But after publishing the app on the device all the the external links behaves accordingly. In some way the PhoneGap infrastructure can handle AJAX requests locally.
So, to test in my desktop I just put the app in IIS and the external links will work. When the app is published on the device the behavior will be the same.

PhoneGap doesn't run a webserver. All files are loaded via file:// protocol. Thus, any request is considered cross origin.
To solve this, you need to allow requests to all hosts.
<access uri="*" subdomains="true" />
See http://docs.phonegap.com/en/1.9.0/guide_whitelist_index.md.html

Related

Running Angular app in IOS app Webview

I have a requirement where we have to run website in iOS app Webview by keeping website source files in locally inside iOS app. Angular need server to run the application but as we are keeping files locally we can't run the server inside iOS application (assuming). Is there any way to run the Angular application inside IOS app by keeping website files locally?
App flow: (expectation)
User opens iOS application - iOS internally opens webview with index.html file
You need to think of this comparing it with if you were testing the web pages on your development PC. When testing on your dev PC, all your web references point to your local machine. What you are attempting to do is basically the same.
Assuming that you load all your resources within the index.html page, all those references will need to be pointed to local resources on your iOS. For example:
<link rel="stylesheet" href="css/style.css">
<script src="public/angular.js"></script>
<script src="app/a_module.js"></script>
Angular.js does not need a server to run, just the angular.js file. You will need to make local copies of any code that your web app references remotely, like angular.js.
By setting the correct source references for accessing all the files via your iOS repository locally, you will have your embedded app.
BUT this does assume that your angular file web pages are currently being served as static pages by the server, and the server is NOT dynamically generating or modifying them.
(What would need to be retrieved remotely, would be changing database information that is stored on your servers, for which Angular apps commonly implement REST apis to retrieve & update. These apis can still be used the same in your iOS web view app.)

What are the security implications of using sandboxed mode and loading scripts from a trusted source?

We are building a chrome web app that connects to a remote server. The remote server will be serving custom javascript files that are stored in the database. These files will be injected into code for working.
To be specific we are using ReactJS framework and we are injecting custom React components into this application based on the given route.
The chrome app with a sandboxed window works normally. However, I am trying to figure out the security implications of using a sandboxed app that connects to a remote server. What kind of security problems can this approach create?
I also want to know if there is a way to make that chrome app only loads JS files that are coming from a specific IP address. In extensions it is possible but I haven't been able to find anything for chrome packaged apps.

Apache Cordova load external website with exclusive app feature

I have a requirement where I need to migrate a website into an Apache Cordova app with minimal effort. I also need to add an extra feature that is not doable without native permissions.
The existing website contains enormous JSP content. As given here, I cannot use JSP files with Cordova. So, I'm thinking of loading (redirecting to) that website into the app. For the extra feature, I would need a two way communication between the website & the app.
I have done that previously between a native app and locally embedded HTML pages. But since the website is not locally hosted, Is the communication still possible ?

Is it possible to use Electron in web application loaded from external web server?

I started to learn Electron and have one question:
Is it possible to use Electron's code in a web application only in the case when application was loaded by Electron from local folder?
win.loadURL('file://' + __dirname + '/app/index.html');
Is it not possible to use electron in web application's java script files if application was loaded to BrowserWindow from external web server?
win.loadURL('http://localhost:9000');
It is absolutely possible. BrowserWindow.loadUrl will also load an http location, localhost or otherwise.
We use this to load the application from a local webpack dev server to refresh with changes without having to restart the application let alone having to go through the entire build process.
Here you can find an example on exactly that
You can use webview to load external web content.
It is similar to iframe with the difference that it runs in a seperate process than your app and it doesn't have the same permissions as your app, to keep your app safe from the embedded content.
More about the webview can be found here

Create an independent web page inside another

I'm facing a problem on my web project. I have a custom device based on a linux which run a QT QWebPage and work with a local Apache server to display a local web application.
Which I try is to display a external page (ie : www.google.com) inside my web application. The problem is that in my application I defined my window.location to localhost in order to run my personnal webapp. When I try to load the external page, it loads it partially because some files needed by the external page are in relative link (ie css/js file) and so my Apache server try to find them locally due to my window location.
If i change the window.location to the external page the display is ok but I haven't access to my webapp.
I can't use window.open to create the other page because the architecture of the device doesn't allow multipage.
My question is : Is it possible to create an independent block in my HTML page with an other window.location than my parent page ?
Thank you in advance for your answers !

Categories