使用jQuery将外部网页添加到div

Question

I have the following piece of code to load a GIF while ajax takes a div and appends some content:

var loader = '<img id="loader" src="loading.gif"/>';

$(loader).appendTo('#container').load(function() {
    $('#container').find('#loader').delay(3000).fadeOut(function() {
        $('#container').append('content')
    })
});

How can I modify this code so instead of appending 'content' , it would append a div from an external webpage.

For example the GIF will fadeout, and inside of the container div will be www.somesite.com #somediv .

Thanks,
Katie

Answer 1

You can't because of Same Origin Policy restrictions.

You could, however, use an iframe to embed part a whole page in your page.

Answer 2

Cross-domain XHR is possible by using the YUL library by Yahoo!. It basically uses the server to fetch the content for you to bypass the policy as Hamish mentioned.

For more information, please see: The jQuery Cross-Domain Ajax Guide