How would I get the html of a page that contains dynamic content?

Question

I need to get the html of a page whose content is generated dynamically via Ajax. * From a different page.

I know I can use Ajax to get the html of a page, but since the content is dynamic it wont be there yet.

$.get( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
  alert( "Load was performed." );
});

Any advice/direction is appreciated.

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

If I'm understanding you correctly, the ajax/test.html page has content on it that is updated via Javascript after that page fully loads. This is not something that AJAX is designed to handle. One potential avenue, if the dynamic page is within the same domain, would be to load the page into an iframe and get the generated markup after a specified timeframe:

<iframe src="ajax/test.html" id="ajax-frame"></iframe>

<script>
    setTimeout(function() {
        var markup = document.getElementById('ajax-frame').contentWindow.document.body.innerHTML;
    }, 1000);
</script>

The method for retrieving the iFrame markup was found in this post.

edited May 23 '17 at 11:43

Community

1
1

answered Jan 29 '15 at 21:36

cmptrgeekken

8,052
3
29
35

This looks promising, I'll give it a try. Thanks – Kolby Jan 29 '15 at 21:49
This worked! Had to do a little hacking because it's angular, but I eventually got it working. Thank you! – Kolby Jan 30 '15 at 00:13

score 0 · Answer 2 · answered Jan 29 '15 at 21:31

are you looking for something like this? (look at the console) http://jsfiddle.net/swm53ran/180/

<a href="#" class="ajax">Ajax finished</a>
<div class="content">
</div>

$(document).ready(function() {
    $('.ajax').on('click', function() {
        // ajax did something and added element to dom
        $('.content').append('hello');
        console.log($('html').html());
    });
});

i added a button to "simulate" the ajax call, and then changed the dom. In your ajax success() function, you could but the $('html').html() code which will give you the html of your view after the ajax is called.

score 0 · Answer 3 · answered Jan 29 '15 at 21:33

try this, data.responseText should have you response.

   var jqxhr = $.get( url, function(data)  
   { 
     console.log( "success" ); 
   }) 
   .done(function()  
   { 
   }) 
   .fail(function()  
   { 
   }) 
   .always(function()  
   { 
   });

   // Perform other work here ... 
   // Set another completion function for the request above 
   jqxhr.complete(function(data)  
   { 
     alert(data.responseText); 
   });

How would I get the html of a page that contains dynamic content?

3 Answers3