Cannot load an external page with jQuery.load into a div in my page

jquery load external
Amal Kumar S picture Amal Kumar S · Feb 20, 2011 · Viewed 47.1k times · Source

I am not able to load an external html page into a div in my page.

My Jquery Code is:

$(document).ready(function(){
     var url = 'http://www.google.com';
     $.get(url, function(response) {
          $('div#external').html(response);
     });
 });

My HTML page is 

<html><body><div id="external"></div></body></html>

I also tried using another JQuery code

$(document).ready(function() {
    $('#external').load('http://google.com');
});

Could anyone please help me.

Thanks Amal

Answer

David Hellsing picture David Hellsing · Feb 20, 2011

Due to browser restrictions, most Ajax requests are subject to the "same origin policy". That means that in most cases, you can’t use jQuerys ajax methods to fetch data from external domains without using a Proxy, YQL, JSONP or equivalent technique to get around this.

A pure javascript option is Yahoo’s YQL service. There is a plugin that extends jQuery.ajax to allow external domains: https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js

Using this plugin should allow the ajax example in your question.

Another option is to use a server-side proxy and then request that page using ajax. If your server can run PHP, try googling for something like "php ajax proxy" and you’ll get plenty results.

Related questions

Can I load external stylesheets on request?

$.getScript('ajax/test.js', function() { alert('Load was performed.'); }); .. like the above code which loads an external JS on request, is there something similar available to load an external CSS stylesheet when required? Like for example when I use …

Read More
Use Ajax() function in Jquery to load PART of an external page into div

I'm trying to load a DIV element from an external page into my current page using the Ajax/jQuery.ajax function. While I have successfully been able to load an entire external page, I can't seem to load just the …

Read More
How do I load an url in iframe with Jquery

I want to load an iframe on click, this is what I have so far: $("#frame").click(function () { $('this').load("http://www.google.com/"); }); It doesn't work. This is the complete code: JS Bin

Read More