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);
       }
     });
   }

Answers


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.


Try something like this:

  var html = '';

  $.ajax({
      uri: 'http://ya.ru',
      method: 'POST',
      success: function(data){
          htmlx = data;
      }
  });

About manipulating with html inside an var

var test = $("<div/>");
test.append(html);

test.find(".innertest");

// When I'm ready to append it..

$('#container').append(test);

If isn't work:

U can use another page on ur server for getting remote page And after it use ajax for request it

Sorry for bad engl


Need Your Help

Redis: Get all score available for a sorted set

database nosql redis

I need to get all score available for a redis sorted set.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.