1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to embed external site using AJAX

Discussion in 'JavaScript' started by frontier2002, Aug 9, 2017.

0
  1. #1
    Is there anyone knows how to embed external site using AJAX code instead of iframe or object
     
    frontier2002, Aug 9, 2017 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,498
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #2
    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.
     
    sarahk, Aug 9, 2017 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    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.
     
    PoPSiCLe, Aug 9, 2017 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    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
     
    kk5st, Aug 9, 2017 IP
    deathshadow and sarahk like this.
  5. frontier2002

    frontier2002 Well-Known Member

    Messages:
    256
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    123
    #5
    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:
     
    Last edited by a moderator: Aug 11, 2017
    frontier2002, Aug 11, 2017 IP
  6. sarahk

    sarahk iTamer Staff

    Messages:
    28,498
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #6
    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.
     
    sarahk, Aug 11, 2017 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    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?
     
    deathshadow, Aug 11, 2017 IP