Create an independent web page inside another - javascript

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 !

Related

Make client-side (browser) javascript request another website and click a button and retrieve a file?

I'm a newbie when it comes to javascript, but since I have a local intranet web app at work, which I would like to programmatically retrieve a file from by programming another website on the internet, I was wondering if it was at all possible to make client-side (browser) javascript request another website (on the local intranet) and click a button and retrieve a file ? (the next step is to parse this excel file to json in the browser but that's a separate problem).
I have looked at artoo.js on github but am unsure if this is up to the task of clicking a jquery loaded button on that site in question, and retrieve a file.
The local intranet app lacks an API.
You can't. Javascript cannot access (private) local file without an explicit file upload made by the user. For public files (i.e. files on a web server) make sure to check if Cross Origin is set up correctly
You can't, unless Cross Origin Resource Sharing is enabled for those files.
Update :
This can be done using Chrome+Pupeeteer+Nodejs..
Read This post this gives a Full Tutorial How to scrap data from a webpage automatically and more..https://codeburst.io/a-guide-to-automating-scraping-the-web-with-javascript-chrome-puppeteer-node-js-b18efb9e9921.
..
make client-side (browser) javascript request another website (on the local intranet) ...
this can be achieved without cross-Origin Resource Sharing If both website are on same server..as in your case LOCALHOST.
click a button and retrieve a file?
For this, you need a js runtime for executing another website client-side. then you can apply js scripting on the page and manipulate the Dom or fire an event like a button click.
But this is very complex to do So alternatively directly access the file or make a common API endpoint for both the websites.

How do I create a Local html file to open webpage and inject a JavaScript function

I have a legacy web application that we are not allowed to modify yet. We need to add a new function to the application in the short term. We have been told that we may modify the webpage with any local scripts we want but we have to wait 4 months before they will unlock the application.
So my goal is to create a webpage locally, click on that local html file and have it open the url for the legacy application, and then inject the new JavaScript function to the application.
On "your" page, use an iFrame to "import" the page you cannot edit, on your page add whatever modifications you need/want.
If there is no server side scripting on the page, then copy the page source to your page, and add whatever you want to it. It is difficult to give you a focused answer without having access to or more information about the actual legacy page.
It can't be done directly since browsers prevent cross site scripting so injecting js from local machine will complain with same origin errors the only workaround i know is to use developer tools and open console then you can type your JavaScript there and run it directly

Get local paths for all cached resource files

Using Firefox addon SDK, is there a way to get the local paths for all the resources (css, js, images) of the page that is currently opened in a tab?
I'm trying to implement the functionality of saving pages locally (kind of like "File" -> "Save page as..."), and for that I need to know the location of the resources that were downloaded by the browser along with the HTML page itself;
Visit this link
To enable the application cache for an application, you must include the manifest attribute in the element in your application's pages, as go in the following
link
https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

Bookmarklet in Phonegap or iframe that acts as top 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.

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

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

Categories