I'm currently working on an application that uses the Phonegap/Cordova framework to display an online and an offline version of a website. If you're not familiar w/ this framework, it offers a simple way of creating multi-platform applications by displaying local files in a full-screen webview.
When launching the application, the Javascript integrated in the local files of the application detects if Internet access if available, and redirects the user to either another local webpage containing a full-screen iFrame of the live website, or a reduced offline version of the website (contained in the local files of the app) if no Internet connection is detected.
I would like to detect when the user logs in using the various forms on the website (being displayed inside the iFrame), but I have no way of knowing which page the user is on, or interact w/ the website content at all because of the same-origin policy.
Would it be possible though to make the Javascript from the local page (which contains the iFrame) interact w/ the Javascript from the remote page (which is being displayed in the iFrame)? This way, I would be able to obtain the login information, and save it for later use (obviously not w/o using a token system), but also it would help for another planned feature (trigger the guidance system).
Thank you.
Look into HTML5 communication, it's pretty simple and sounds like it fits your needs
http://stevehanov.ca/blog/index.php?id=109
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Related
Basically, we are using a headless CMS to edit content on Website A. We are building our own CMS UI based on the headless CMS API (call this Website CMS).
Now, we have this page in Website CMS wherein you can edit the content on the left panel and get a preview of Website A on the right panel (mobile view).
I haven’t done anything like this before and I am wondering what’s the best way to accomplish this and if there any libraries that help with this functionality.
Some ideas:
Embed Website A within Website CMS and any changes done on the left panel basically just refreshes Website A (which is just embedded into the page).
Recreate Website A as a page in Website CMS and call the same APIs so that the changes both happen on Website CMS’s Website A and the actual Website A. (Although I don’t see how this would be more beneficial and will create 2 separate codebases for the exact same page).
Others???
Main framework we are using is ReactJs for this CMS UI.
Option 2 is what I would do and wouldn’t necessarily be duplicative.
You would want users to be able to preview changes without publishing them. So porting the real website wouldn’t be compatible with that goal.
Code duplication would probably be minimal. It would share most of the same code and it would also propagate much faster.
you can establish a communication link between CMS and website A to exchange data.
Options
you can embed website A inside Website CMS using an iframe and then you can use postMessage to exchange data between CMS and Website A.
Or else you can use WebSockets where website A will listen for the changes done at the left panel of the CMS.
I have a business web app that needs to pull in information from various other web sites. For most sites, the user just instructs the server to pull the data (either using .NET's HttpRequest, or Selenium).
But for some unfriendly, Javascript-heavy sites, our users have to visit the site manually, navigate to the right spot, and copy and paste into our application.
Other than bookmarklets, is there any way for our page to show an IFRAME with the source web site loaded, allow the user to navigate within the frame, and then capture the IFRAME's body?
Since the site in the IFRAME isn't in the same domain (not even close), I can't seem to work around browser cross-site scripting limitations. I've tried using HTML5's "sandbox" feature, but it appears to only allow communication (via "allow-same-origin") the other way, from the IFRAME to the host site, which isn't useful to me. Also, it doesn't work if the site in question attempts to load its frames to the top context.
What I'm ideally looking for is a solution that would allow the browser to be configured to trust my web site implicitly (it's an intranet app) and allow it to access any frame's contents. That would at least get me in the ballpark. Bonus points if I can get the iframe to redefine the "top" context as its own frame, so the hosted site functions properly within the frame.
The best approach I've found through many many screen scraping projects (scraping JS heavy pages) is to create a user-script or Greasemonkey script, setup a few virtual machines in their own IP space (for protection) and feed them a list of sites to visit from a remote program:
Check the queue at a set interval
Request page with Greasemonkey, etc.
Capture contents and send to remote program for processing
You can't use an iframe method and you are going to bang your head up against a wall trying to go that route, the method I've described has worked for numerous large-scale scraping projects.
I've just created the required HTML5 Mobile web pages(including the CSS3 and javascript pages). I've got the apk file from build.phonegap.com as well.
But I want it to be dynamic i.e I should be able to add content from my laptop.
I've searched a lot but I'm unable to get the right info on doing this.
I just want to be adding simple text paragraphs from my local server(laptop) to the app on the go. What do I do ?
Sound like you need to set up some type of json / sql web service.
Use your machine's ip to do this.
Suppose your laptop ip is 192.168.1.1
Then from your application just use
http://192.168.1.1/your_appliction/webpage
replace http://localhost/ to http://10.0.2.2/
EDIT:
Treat your laptop as remote server and access the files in it as you normally do in website building.
From another post I think might help...
1- if you are building the whole site from scratch: You can create your site by any CMS like dotNetNuke or joomla which will allow you to login and edit what you want
2- if you are building just this page from scratch : You can build your page with online-editing in mind, in this case I recommend to build two pages one for for viewing content and the other for online-editing you can use any HTML-Editor control like FCKEditor
3- if you are dealing with already built page : it will be easier to build administration page which you can upload the new version of the content page to it, and the administration page take care of replacing the content page
Or maybe even the knockout js plugin could be something to look into http://jsfiddle.net/rniemeyer/LkqTU/
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 have a project I am doing that requires delivery on a DVD and through the web. I have been using Flash to drive a menu system and javascript to load pages or other actions on the web. However, when I move it to a DVD I receive a Security Error 2060 - the swf is unable to
communicate with the html page it is loaded onto and so none of the javascript is parsed. I am using ExternalInterface calls and jquery on the html page.
Searching online I have made sure that Flash when publishing "Allow local files only" and on the html page I'm using swfobject with a param field of allowscriptaccess of "always" - looking at the generated code on pages it shows that the allowscriptaccess is there.
Is there some security setting that I can program in that will give my Flash application the ability to function the same from a DVD as it would from the web and communicate with Javascript? If I need to compile two different swfs that would be okay.
I suspect you are having a local sandbox problem. Have you gone through the information at http://www.adobe.com/devnet/flashplayer/security.html?
If you can do PC-only, then investigate Server2Go. This is a standalone WAMP stack that works well from a CD/DVD. Your page will then run in the internet zone, and you should not run into the same security problems.