How can I load webpage content into a div on page load?

Question

Without using iframes, is it possible to load the contents of

<div id="siteloader"></div>

With an external site e.g. somesitehere.com

When the page loads? - I know how to load contents from a file, but wasn't sure how to load a whole site?

Many thanks,

Iframe is better than object for loading html page https://stackoverflow.com/questions/924946/use-of-iframe-or-object-tag-to-embed-web-pages-in-another — Michael Freidgeim, Jul 16 '20 at 07:53

score 52 · Accepted Answer · answered Apr 01 '12 at 11:37

52

This is possible to do without an iframe specifically. jQuery is utilised since it's mentioned in the title.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Load remote content into object element</title>
  </head>
  <body>
    <div id="siteloader"></div>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
      $("#siteloader").html('<object data="http://tired.com/">');
    </script>
  </body>
</html>

answered Apr 01 '12 at 11:37

Marcel

27,922
9
70
85

9

Note this will not work if the remote page’s [X-Frame-Options header](https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options) disallows it. – Benji XVI May 24 '14 at 20:37

score 39 · Answer 2 · answered Apr 01 '12 at 10:55

39

Take a look into jQuery's .load() function:

<script>
    $(function(){
        $('#siteloader').load('http://www.somesitehere.com');
    });
</script>

However, this only works on the same domain of the JS file.

answered Apr 01 '12 at 10:55

faino

3,194
15
17

7

This jQuery .load() method is better than the jQuery .get() proposed in other responses, because it allows you to load an specific item from the external url DOM (for example, just the content of a div and not the full page). That way you will avoid to have duplicated markup like two "body" and so: $('#result').load('ajax/test.html #container'); – tomasofen Apr 01 '13 at 07:28

score 12 · Answer 3 · answered Apr 01 '12 at 11:00

12

With jQuery, it is possible, however not using ajax.

function LoadPage(){
  $.get('http://a_site.com/a_page.html', function(data) {
    $('#siteloader').html(data);
  });
}

And then place onload="LoadPage()" in the body tag.

Although if you follow this route, a php version might be better:

echo htmlspecialchars(file_get_contents("some URL"));

answered Apr 01 '12 at 11:00

Njdart

312
1
10

31

Dont you think `$.get` is Ajax? – Ajinkya Apr 01 '12 at 11:01
No, this is not possible in ajax, but it is possible in jQuery alone. a $.get() can be called once the page has loaded to dump the page into the specified div – Njdart Apr 01 '12 at 11:04
2

Your example is using Ajax in jQuery. I think you are trying to explain something different than your example. – Ajinkya Apr 01 '12 at 11:06
20

@Njdart: [`$.get`](http://api.jquery.com/jQuery.get/) is a shorthand Ajax function. – Marcel Apr 01 '12 at 11:14

score 1 · Answer 4 · answered Apr 01 '12 at 10:51

1

You can't inject content from another site (domain) using AJAX. The reason an iFrame is suited for these kinds of things is that you can specify the source to be from another domain.

answered Apr 01 '12 at 10:51

Lee Davis

4,685
3
28
39

How can I load webpage content into a div on page load?

4 Answers4

Linked