How to open a webpage and run your JavaScript on it? - javascript

I am trying to load a webpage then insert my own Javascript into it.
I have the current code here:
window.location.assign('http://http://79.170.44.75/hostdoctordemo.co.uk/downloads/vpn/index.php');
document.getElementById('address_box').value = prompt("Site Address: ");
document.getElementById('go').click();
and what I am trying to do is:
Load the webpage
Set the address box to a value
Simulate a mouse click on the search button
So it loads the webpage, then searches a value it sets itself.
The problem with my current JavaScript is that as soon as the webpage has loaded the JavaScript stops working (as I expected). I have tried using the iframe tag to load the webpage 'within the webpage' but that did not work when obtaining the id and people said iframe would also not work because of the resolution difference.
**The Question: ** How do I load a webpage and run my own JavaScript code on it? Thank you!
Matthew

You're propably looking for something like Greasemonkey.

I really can't see an easy way to do what you want.
When the browser receives a web page from a server the javascript is interpreted, and only after that, the page is presented on the screen.
So you would have to have a web page with a button or other mechanism to make a request to a web server, receive the request, save its contents locally, add your javascript code and only then "give it to the browser".

Related

Change back button behaviour of browser

Posting without a target so that a web page reloads seems useful behaviour for some things - such as writing a login page. I have implemented a calendar in PHP which takes advantage of this. It reloads an object from the session (or creates a new one if not present), applying any changes that result from the post then saves the object back to the session. The problem is this. If I hit the back button I don't want to go back through every click of the calendar button but would rather jump back to the page before arriving at the calendar page. Not only that, if I do go back one calendar page after another I get an annoying "confirm form resubmission". I have implemented an incrementing value after the # for each post so that I might be able to use window.onhashchange. The problem is that window.onhashchange never fires so I am unable to intercept the back button and pop the history stack. Any ideas? Am I better off coding on the server side with javascript?
Well I solved one problem. My form subclass in PHP defaults to using POST as I understand this is more secure. This causes the annoying resubmission problem when using the back button. I now use GET in my calendar page which solves this issue. I am still bemused by JS debugging in Netbeans. I have never got script to stop on a breakpoint within a single document. I have previously had it working with an external javascript source but this no longer works. If I can output to console but there is no window in which to see the output. I am told window.alert no longer works for some events in Chrome. I am completely blind! To add to the irritation, it took me a while to realize was that the javascript file was cached and changes would not be reflected in behaviour. I have put a random number into the script tag which fixes this issue. As I am debugging using netbeans connector in Chrome I have no idea why this does not force the js file to refresh. All in all, this appears to be a pretty shambolic toolchain.

Putting own javascript in selected page

I want to know, if it is possible and how to run javascript code in console in new page, when somebody click on link in my page.
For example. I have got page and there is button. When somebody click on it, it will redirect to another page. In this page It will run my own javascript code, sended from previous page and appeared in console of new page.
This way I want to change for example stylesheet of some selected page and demonstrate the changes.
Thank you.
Shortest answer: No.
Short answer:
This would effectively violate the same-origin policy, and would be a nightmare as far as XSS is concerned.
Imagine for a moment that someone created an 'infected' link, when clicked would infect all the links on the next page in the same manner. Eventually when on the correct page, these infected links would run some code that would snatch up details of what was occurring inside the page (keystrokes, clicks, etc...) and send it back to a server.
All this without ever touching the user's machine.
The closest thing you can do is create a bookmarklet or userscript. It's up to the user to place these things on their computer, and run them on the correct page.

Take a screenshot of a certain website at a given moment

I want to take a screenshot from my website of another website or preferable 1 part of it (an object tag).
I want it to work this way: I click on a button that will send a request to screenshot the page at this moment. Several ideas are insert the page inside a flash object and screenshot it. Or opening a browser on the server and when I click the button send a request using AJAX to tell the server to screenshot with this browser.
How should I do this because I kind of failing right now with the flash Idea. The page I am trying to screenshot is a live camera that uses a .wvx object. But I can't even do that with a .swf object.
Thanks!
You can try phantomjs. They have several examples of renderding page output. It supports plugins like flash too.
render() always renders the entire page. To just render one <object> tag, I guess you can do one of:
create a page that only contains that <object> tag.
use javascript to remove everything else.
crop the final screenshot based on <object> page coordinates.
To use phantomjs from php, try php-PhantomjsRunner.
Edit 1: In case you only want to render a flash file that does not actually rely on the web page it is in, you can try Gnash according to the blog post "Server-side PNG rendering of SWF images using Gnash" by Valentine Bichkovsky.
phantomjs screen-scraping

Prevent javascript from popping out of frame

I making a tool where a user has to quickly sort throo a heap of websites
to determine weather they are fit for a particular purpose.
I load the websides inside and iframe. All fine here but
some sites have javascript code that makes them pop out of frames.
Now is there a way to prevent that ?
i'v tried onbeforeunload , it worked for a while , but it seems even that isn't working anymore.
No, not really - if website has script like top.location = "mypagehere"; then the other page will load outside the frame, or if it has alert() alert will show up.
The only way around this is using server side language to read the contents of those remote sites then put only the contents, without any scripts, inside your own placeholders.
If you have server side language at your disposal edit your question and put comment here so that we can guide you further.

Getting the final/timed render of a URL

I am looking for a way to, give a URL, get the source of a webpage back after the JavaScript has been run on it. For example:
I have a webpage with a .
On loading the page, some JavaScript populates the div.
Viewing the source of the page through a browser will not give the information which is within the div.
As far as I know, in order for the browser to render the page the div must have been filled with (X|D)HTML which would mean that the source of the page after being rendered is still just nested markup, so theoretically there should be a "final" version of the page source.
I have considered using a rendering engine like WebKit or Gecko and somehow adapting these to do this, however this is a fairly large task and I don't really want to duplicate something which has already been done. Does anyone know of a way of performing this task.
Regards.
Update: I am aiming to use Selenium (as mentioned in the comments to the accepted answer) to do this automatically for several pages. My project is a web spider which by design needs to target a number of pages in which the content I am aiming to reach is not available until after the JavaScript has populated everything.
Such addons for Firefox as the WebDev toolbar, or Firebug have options like 'View generated source'.
As far as timing it goes, just about the only option you have is to have a snippet of javascript code. You could set a start-time as soon as is possible on the page-load, and check again when the page is completed (either for dom-ready or page completely downloaded). It's going to be highly variable however, and if you are trying to time it in order to improve the speed (which is good to know, and to do) - just getting Firebug + Yslow would be far more useful.
Within Firefox you can get the final rendered DIV by waiting the browser to finish rendering, then pressing ctrl-A to select all content on the page and finally selecting "Show selection source" from the right-click menu.
This shows you the manipulated/populated DOM-code of the page.

Categories

Resources