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.
Related
I'm trying to develop a Chrome extension that is supposed to completely replace a specific website's pages with a new UI. In other words, when the user visits said website, the extension should "intercept" it seamlessly and display the new "app" (preserving the URL and without opening a new tab or window). I currently use a content script to manipulate the DOM, but it's too messy.
Chrome apps such as Google Docs achieve the same goal through URL handlers, but they're not an option since they're now deprecated.
Currently, I'm aware of two options:
Intercept the URL and redirect it to an extension URL. I want the URL to be preserved.
Use a content script to stop the page from loading at document_start (using window.stop()) and then "inject" the new app. Apparently, that works, but it sounds quite hacky and prone to unexpected glitches.
What I'd like to know:
Is the second approach good enough? What limitations and other issues will I face if I use it?
Is there any other approach that is at least as good (and preferably designed for this purpose)?
You can't open a chrome app in a tab, only in a window. I don't think they have content scripts either.
Also, chrome apps are now only available on chrome os when you publish it for the first time (existing chrome apps work for any os).
To solve your question, you could use an extension with content scripts and just open up an iframe fullscreen so the url is preserved in the omnibox and it could have the page you want in the iframe as the page that would be in the app.
Content handlers are meant for opening a special protocol url to do something like send an email, etc. Examples would be like tel://, sms://, mailto:, etc.
So you would not want this. Also they aren't that noticable when approving to handle the protocol.
I'm trying to handle reauthentication using a different Authorisation website, while within a Single Page Application (SPA) in my home website. Both websites are internal to a client site.
I can't use the standard "redirect" method as I'll lose my SPA JavaScript context.
I've investigated and had CORS setup on the Auth website so it's now returning Access-Control-Allow-Origin: https://www.mywebsite.com. When I try to load the Auth page into a JQuery UI dialog it fails as the scripts all try to load in the context of the Home website.
i.e.
From my website https://www.mywebsite.com/static/
I'm loading https://www.auth.com/login.html.
When loaded into a JQuery UI dialog it tries to load it's scripts as https://www.mywebsite.com/static/scripts/authscript.js
instead of
https://www.auth.com/scripts/authscript.js
I also tried loading the Auth page into an iframe by changing the src tag but it just reloaded the page.
Is there a way to change the Source directory in the context of the CORS web page I'm trying to show?
So I couldn't get the page to load correctly into a standard jQuery Modal dialog and I have no control over the Auth page I was connecting to. To solve this I investigated the problem I was having with the iframe and used an HTML5 feature sandbox to fix it.
The Auth page was using a "break out" script to reload the page if it was loaded into an iframe and obviously this broke my SPA context. HTML5 allows you to restrict the contents of an iframe.
<iframe src="" id="my_auth" sandbox="allow-forms allow-scripts allow-same-origin"></iframe>
allow-forms Allow form and submit
allow-scripts let it run JavaScript
allow-same-origin let it consider the Origin the same as the script (i.e. the Auth website), this was necessary to enable cookies
Of note is that I am not including allow-top-navigation which is what was allowing the reload of the page and loss of my JavaScript context
Voilà, auth page displayed inside a jQuery modal dialog (containing the iframe) with no need to pop up another window.
CORS was necessary to allow the redirect to the Auth website (which happens in the browser before JavaScript gets involved). You could also trap the "Access-control-allow-origin" exception instead.
The iframe with the Siteminder login was accessing a page from my site that set a value in localStorage once the user had logged in. The app just polled localStorage in the background to see if the user had logged in successfully.
Hope this is useful to someone.
I have build simple desktop application, which is loading content into webview element.
Now I am looking for some options how to resize application window based on some Javascript action called from DOM inside webview.
For example:
By default I am displaying some information related to the team of people using this Chrome application on their desktop. These data are being fetched from PHP application running on our servera rendered using HTML/CSS/jQuery.
Now I would like to render some form, which will give us options to edit this content directly inside Chrome application and store them in database, but the issue is, that by default is Chrome application very small: approx. 200x300px and at the moment, when I render this form I would need to resize whole application to approx. 300x500px and I have no idea how to achieve that.
I was browsing in Chrome apps documentation where i have found some info related to app.window, but I did not find a way, how to apply this into the real world app and execute such a commands via Javascript inside webview element.
Thank you for any ideas and suggestions.
You won't be able to do that from inside the webview. You are correct that chrome.app.window is the required API, but a webview-embedded page has no privileges to call it.
You'll need to communicate with your app's script, which has the necessary privileges. I would actually recommend using the "externally_connectable" method since it's for a specific site.
Once you've passed a message to the app page's script, you can resize the window with
chrome.app.window.current().innerBounds.setSize(width, height)
or, in case of a listener in the event page,
chrome.app.window.get(windowId).innerBounds.setSize(width, height)
Note that you can set the initial size when creating the window.
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.
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.