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.
-
Any particular reason why you don't just use an iFrame?JasCav– JasCav2011-03-05 20:52:38 +00:00Commented Mar 5, 2011 at 20:52
Add a comment
|
5 Answers
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
1 Comment
Cᴏʀʏ
There are far more languages than just PHP that you could use to build an HTML proxy.
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.
Comments
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.
1 Comment
Groovetrain
I agree. This can be dangerous
I think you can only load content from the same web server using jquery but I might be wrong
Comments
$('#myDiv').html('<iframe src="http://google.com" width="100%" height="300">');
basic, but would do the trick
Comments
