CODEWITHSUNDEEP
jquery
Julio
Julio

Reputation: 1855

Loading an external site into a div using jquery

I'd like to be able to load an external site into a div - for example googles homepage.

Ive tried:

$('#myDiv').load("http://www.google.com");

with no such luck.

Any help would be much appreciated. Thank you.

Upvotes: 0

Views: 2731

Answers (5)

moonshadow
moonshadow

Reputation: 89155

Your browser is specifically designed to prevent you doing this. Read about the same origin policy for more information.

You have two options for loading content: you can place the external content in an IFRAME, which will let your script cause different pages to be displayed but not interact with their content programmatically; or you can place content hosted on your own servers into a div using jQuery with code such as that in your question.

Upvotes: 1

DexCurl
DexCurl

Reputation: 1703

$('#myDiv').html('<iframe src="http://google.com" width="100%" height="300">');

basic, but would do the trick

Upvotes: 0

Thinker
Thinker

Reputation: 14464

You can't do this directly, because site you are trying to load is on different domain, and that is forbidden by browsers policy. There are two approaches:

  • JSONP - that will work only with page, you can edit
  • PHP proxy: load you page through php script located on your site

Upvotes: 1

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107606

What you want to do is dangerous and should be avoided. You've given an example of cross-domain requests and most browsers block you from doing this. You're violating the same-origin policy.

Use an <iframe src="http://www.google.com"></iframe> if you really have to.

There's also a supposed solution with jQuery and YQL, but I'll let you sniff that one out.

Upvotes: 0

RedSoxFan
RedSoxFan

Reputation: 634

I think you can only load content from the same web server using jquery but I might be wrong

Upvotes: 0

Related Questions