I guess you could use javascript to extract the dom for the main part of the page and then just place that in a div. Not ajax, as such, just javascript. You run the risk of breaking the formatting though.
I would recommend against it. Better to run such a pull on the server side, and post it on the page from the same domain (if possible / legal). Because either you're fetching this via JS / Ajax, or via iFrame or objects, it will fail on Firefox, for instance, if the tracking prevention is on (the user have to manually disengage this) before external content is loaded (not all, mind you, but anything that can be considered a possible tracking item on the site). And so on. There are plenty of ways to include content from other sites - javascript is rarely the best solution.
When solving a problem, it is seldom a Good Thing to talk about how you want to solve it. Tell us what you want to do or accomplish, instead. You are more likely to receive optimal solutions. gary
Actually i want to do it like the output of the code below. But the code below will need to click button ....i want it when it load the page it directly load the external site content without clicking button. And then the output size dimension is responsive meaning adjust according to the site where it is embedded on. <!DOCTYPE html> <html> <body> <div id="demo"> <h1>The XMLHttpRequest Object</h1> <button type="button" onclick="x()">Change Content</button> </div> <script> function x() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); } </script> </body> </html> HTML:
There's no reason why the function can't run as soon as the page has loaded - or have you had problems with that? The next thing would be that the file ajax_info.txt will have a snippet of html and will adapt to the stylesheet of the main page. Your external page is going to have it's own css and js which will clash with yours even after you've stripped out the <head> section and the html you don't want to display.
add x(); before </script> to run it directly during page load. But really, this is NOT something I would EVER suggest doing on a page if that's ACTUAL content, since a LOT of users just won't get that information. Well, that's not entirely true -- it depends on what the content is, the WHY you are doing it as @kk5st said. You're not really saying WHY, and without that it's hard to say what the proper answer is. GENERALLY this type of scripttardery is a giant middle finger to usability and accessibility which is why I advise against it... or at least advise against it as the ONLY means of accessing/loading that data. Good scripting should enhance an already working page, NOT supplant functionality or be the only means of providing it! Also, this is a JavaScript question, why is it in HTML/Design?