CODEWITHSUNDEEP
jqueryajax
CodeyMonkey
CodeyMonkey

Reputation: 739

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

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,

Upvotes: 34

Views: 220855

Answers (4)

Marcel
Marcel

Reputation: 28087

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>

Upvotes: 51

Njdart
Njdart

Reputation: 312

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"));

Upvotes: 12

faino
faino

Reputation: 3224

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.

Upvotes: 39

Lee Davis
Lee Davis

Reputation: 4756

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.

Upvotes: 1

Related Questions