I am building an app for my school in HTML and using the Github + Phonegap cloud builder to package it as .apk, .app, etc for cross platformity.
The app its self loads an external webpage. This webpage is the schools and I have permission from them to access it but I do not have access to the server its self. I wrote a bookmarklet that accomplishes the tasks I want the app to accomplish however this requires the ability to run the bookmarklet. This can be done in any standard web browser but I can't seem to figure out how to do it in Phonegap.
My first thought was to iFrame the schools's site but sadly they use every possible breakout code that even after implementing every fix I could find it still navigates the top window and not just the iFrame.
I come to you asking for help.
Is there a way to do either (or both) of the two tasks below?
Create an iFrame that, to the page it loads, appears and functions exactly as the top window so that even when it navigates top the top window it still stays within the iFrame
Run a javascript bookmarklet from a phonegap app without the need to involve any native code so that when this external page is loaded, additional local JS can be executed without being called by the page its self
You can set src of <content> in config.xml file to be a remote url. (which by default points to local index.html in www directory)
<content src="REMOTE_URL" />
see The config.xml file.
Related
I'm working on a mobile app with Cordova. When the user starts up the app, I'd like to kick off a non-blocking function to load data from the server. This function can take up to a few seconds.
I'm using the leecrossley/cordova-plugin-background-task plugin. It works fine if I stay on the page that kicked off the function. If I change pages, it stops the function.
Any thoughts?
Jon
Sounds as if you are experiencing web-view-throttling!
Cordova uses the Chromium web engine so it usually follows all of the performance settings implemented in the chrome browser.
You can read some more about the throttling issue here:
https://thenextweb.com/apps/2017/01/26/chrome-throttle-background-tabs-google/#.tnw_WIKDX2EX
The solution to your problem is
to create a main page to function as the core of your application. This main page will always be open 'thus saving your from scripts being stopped when a new page is loaded.
For app pages, i recommend either:
creating a separate .html file per app page, then load those external pages into your main app page via an iFrame ...the src of the iFrame can be updated via javascript. (the downside to this approach is that you will need to write additional javascript to monitor and control the events that happen inside of your iFrames -from the main page.)
or
Build a very big single page application; wrapping all of your app pages in divs.. then create a javascrip menu function that manages what page is displayed and what page is hidden. (This may result in a massive .html page but this method will allow you to run any number of non-blocking scripts the device can handle at once.) <-- This is the method i have been using for over three years, i also add some iFrames to include special page modules when needed. CSS and JavaScript can be loaded from external files.
I believe most cordova developers actually use this single-page method!
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 !
my question is, if it will be possible to use native phonegap feature access from a remote website, without using an iframe.
My current solution looks like this:
If the app is started index.html with the iframe is loaded. When the 'deviceReady' event is fired the 'src' of the iframe is set to the remote website, and it is shown in the iframe. I can navigate through the website as usual. To navigate back in the history of the iframe i listen to the 'backbutton' event in the index.js file and send a postMessage to the iframe to go history back. This is my work-a-round to use the phonegap functionality for the external website.
I have full control over the remote website and can change code there.
The main problem is the "look and feel" of this iframe. The layout and performance of the iframe is not consistent and very poor.
So my question is, if there is any other solution to have access to the phonegap plugins without using the iframe.
Greetings
Yes,
InAppBrowser
http://docs.phonegap.com/en/3.1.0/cordova_inappbrowser_inappbrowser.md.html
You can executeScript, too.
This is an exteranl WebView, and full Screen, so much different than iFrame.
I have a PhoneGap application with an iFrame which is loading content from a site I control. (same domain as the app)
The problem is that when using Javascript widgets like Facebook and Twitter, it's possible to navigate away from the local top level frame. I wouldn't mind so much if it were just the iFrame, but it's eating the whole app, and my preference really is to just redirect the user to an external browser to show the site.
How does one prevent this?
I've tried to counter with modification to the webView: shouldStartLoadWithRequest: method, but that won't work on other platforms, and I cannot easily distinguish between external resources loading in iFrames (SNS widgets) and the same scripts replacing the top level frame.
I think ChildBrowser Plugin can work for you. It will not redirect the calls to webbrowser but I believe it will satisfy your needs. It supports iOS and Android.
The child browser allows you to display external webpages within your
PhoneGap/Cordova application.
A simple use case would be:
Users can follow links/buttons to view web content without leaving
your app.
Display web pages/images/videos/pdfs in the ChildBrowser.
I am writing an application on XULRunner that displays HTML pages from the web:
I have a very simple XUL file with a in which is just a filling the window and loading a local HTML file.
In my HTML, I have an iframe to load content.
What's cool with XULRunner is that I can access the content of the iframe for many things (display page title, images...)
What's not cool at all is that, unlike what I had when my app was running in a browser, I have two big bugs with some pages:
1) Some (many?) pages (like "yahoo.fr" have malformed HTML content, especially for tag where the tag is not closed (the IMG tag without the /> at the end).
==> This does not bother Firefox but in my app, XULRunner does not decode the HTML and thus display the rough HTML source code in the page.
2) On some pages, like, for now, the home of nytimes.com, the login page of bloglines.com and of yahoo.fr, "something" happens in the iframe that causes the src of my tag (that is my app that SHOULD NEVER CHANGE) to change thus closing my app.
==> I guess it may be linked to an attempt to open in another window.
Does anyone have a clue to solve these two problems? Better version of XULRunner (I am using 1.9.1)? XUL options to prevent a page to open in new window? Others?
Thanks for your help,
J.
Rather than a <iframe/>, use a <browser type="content-primary"/>. That will solve your second problem (by letting the system know that the contents of that frame belongs to the web and shouldn't be able to change you).
The first question really depends on how things are being loaded. Are they from http, or from a previously-saved local file? Do you useful mime types and things from the server? Or, if local, what file extension do you end up with?