Add HTML/JS code to external web page after it has loaded

Is it possible to load an external web page like ‘http://www.google.com‘ and then append my own HTML/JS code to the end of it (e.g. to run a function)?? Surely there is a way to load an external page then add a little bit of my own code after it? Something like this:

<html>

<script>

document.location.href="http://www.google.com/"; //Load external page

function myscript() {
...blahblah
}
</script>

<button onclick="myscript();">Click me</button>

</html>

I’d like that button to be at the bottom of the external page. Please do not suggest parsing methods in php. I’ve tried doing this by parsing the page first in php then appending my own script to it and echoing as I described here: Append HTML to page after redirect

This works for simple pages where there are no re-directs or when the final external page can be parsed properly. The problem is that I can’t properly parse the external page. The code that is parsed doesn’t seem to function without the code from previous pages (before the re-directs). I need to do this without parsing/scraping/crawling.

Thanks!

EDIT: I’ve tried displaying the external page in an iframe as suggested by Amadan:

<script>

function myscript() {
...blahblah
}
</script>

<iframe src="http://www.google.com/"></iframe>
<button onclick="myscript();">Click me</button>

</html>

However, in firefox it just displays a blank box but in IE it says “This content cannot be displayed in a frame: To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame.”

Any way I can get around this?

EDIT 2:

I’ve included jquery and the cross domain script here (https://github.com/padolsey/jquery.fn/blob/master/cross-domain-ajax/jquery.xdomainajax.js). This is the code I’m using now to get the contents using ajax. How would I go from that to actually displaying the content in the webpage? Sorry I’m really bad with ajax/jquery!

   function test () {
     $.ajax({
       url: 'http://www.google.com/',
       type: 'GET',
       success: function(res) {
         var content = $(res.responseText).text();
         alert(content);
       }
     });
   }

Answer

You can’t append anything to a page you don’t control except by installing a browser extension (which then works only for the clients where your extension installed).

You can include the contents of a page you don’t control inside your own page (in two main ways: client-side iframe and server-side pull), but you seem to be saying this is not what you want.

Thanks!

Advertisement

Answer