Get innerhtml from an external page using Javascript

Question

I am trying to get innerHTML DIV which is on an external page. Can this be done using this kind of javascript code?

<script type="text/javascript"> $(document).ready(function(){ var html = document.getElementById("glr1").src='/my_page.html'.innerHTML ; alert(html); }); </script> 

Answer 1

The jquery download function allows you to specify the identifier of the item to load

 $('#result').load('ajax/test.html #container'); 

http://api.jquery.com/load/

Answer 2

Since it looks like you're using jQuery, something like this should be pretty close:

  var html; $.get("my_page.html", function(data){ html = $(data).find('#glr1').html(); }); 

Answer 3

You can create a hidden <iframe> element, load this page into it, and then plunge into it to find your content.

  $(function() { $('body').append($('<iframe></iframe>', { css: { display: none }, src: 'my_page.html', id: 'my_mage', load: function() { var html = $('#my_page').contents().find('whatever').html(); } }); }); 

Answer 4

You cannot get html from external html due to security issues.

You can get html only from a frame located in the same domain.

Answer 5

It is possible to do what you wish, but I would say that you need to first extract the external HTML file using XMLHttpRequest .

Answer 6

not really. Only if the desired page is in the same domain and the same protocol can you try to embed it in an iframe or use ajax. jQuery has already implemented a way to get only part of the external page via ajax:
$.get(url+"#"+id); where id is the id of the div. so you have something like:

 var aux = window.location.href.split('/'), id = 'glr1', page = 'my_page.html'; $.get( aux.splice(0,aux.length-1).join('/') + '/' + page + '#' + id, function(){alert(arguments[0]);} );