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

Question

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

So you want to pass your scripts onto the next site? This is a form of: http://en.wikipedia.org/wiki/Cross-site_scripting — Zarathuztra, Dec 09 '13 at 01:50
"Any way I can get around this?" Even if I knew how to do it, I would not help you with this. They are very clear that they do not wish you to use their resources in that way, just like if I was a locksmith I would not teach random people on the 'Net how to commit a burglary (even if they swear they'll only use it to open their own door). — Amadan, Dec 09 '13 at 02:32
What is the url of the page you want to add your script to..? I mean the first one. — Youss, Dec 09 '13 at 10:07
Read on techniques the GreaseMonkey browser add-on uses... ;) — TomeeNS, Oct 25 '14 at 20:17

score 5 · Accepted Answer · answered Dec 09 '13 at 01:50

5

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.

answered Dec 09 '13 at 01:50

Amadan

191,408
23
240
301

I CAN and have included the contents of a page I don't control inside my own page by getting its contents using PHP (which I think is server side pull as u say) and then echo-ing what I collected onto my own html page. However if this echo contains re-directs in JS (which it does) then it leaves my PHP page and I can no longer echo/print to the page because it is now external and not running from my PHP code. – pauloz1890 Dec 09 '13 at 01:55
1

if you're using document.location.href, it's no longer you're own page. You're telling your browser to take you somewhere else. – Zarathuztra Dec 09 '13 at 01:59
1

Yup, that's what I meant by "server-side pull". What you need to do in this case is rewrite all of the links as well, either to correct for the relative links and make them absolute, or to proxy them to your script so you continue to be in control. If there are any links that are in JavaScript or come through AJAX, tough luck. – Amadan Dec 09 '13 at 01:59
Amadan thanks for your help. I tried an iframe as you suggested. Please see the EDIT of my original post. Anything else I can do? Or is there a way to force it to be displayed in the iframe? – pauloz1890 Dec 09 '13 at 02:14
'You can not append anything to a page you do not control' - why on earth one would append anything he or she does not want? To append anything to a document use document[html element id].innerHTML="Trolololololo" function or just document.write("
TRololollollolo
"), document.write("Blah blah"). ;) – TomeeNS Oct 25 '14 at 20:12

score 0 · Answer 2 · edited May 22 '20 at 02:53

Try something like this:

  var html = '';

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

About manipulating html inside an variable

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

test.find(".innertest");

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

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

If it doesn't work, you can use another page on your server for getting a remote page and use ajax to request it.

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

Thanks!

2 Answers2

TRololollollolo