Using JQuery to embed an external HTML file

Question

I am working on a page that needs to import one HTML file into another using JQuery's "load" command. It should be fairly simple - it pulls in the content of the site header (logo image, search box, menu bar).

On my test page it works, but in the live storefront it doesn't work, and I can't figure out why.

Here's the line in my JS file - very simple:

$("#x-head").load('http://www.sunandfuninoc.com/testingsites/jxinstalls/topparts/ebay/head.html');

The HTML div that should be populating looks like this on my main page:

Here's the test page that's working brilliantly: http://www.sunandfuninoc.com/testingsites/jxinstalls/topparts/ebay/store.html

Here's the live site that's not loading at all: http://stores.ebay.com/Top-Parts-Store

Any ideas? Thanks!

Do you get any errors in your console or Firebug or whatever developer tools you are using in your browser? — MrOBrian
– MrOBrian, Commented Jul 31, 2012 at 21:48
"Origin stores.ebay.com is not allowed by Access-Control-Allow-Origin." — ahren
– ahren, Commented Jul 31, 2012 at 21:50

Mitya · Accepted Answer · 2012-07-31 21:54:14Z

3

This is due to the same origin policy that JavaScript operates under.

Except where servers expressly permit it, you may not pull content from a separate, remote server (i.e. other than the one you're running on) when using AJAX.

http://en.wikipedia.org/wiki/Same_origin_policy

Unless the server you are calling allows cross-domain calling, your only option will be to load the page not via jQuery but via a server-side proxy, e.g. PHP via cURL. Server-side languages are not normally subject to this restriction.

answered Jul 31, 2012 at 21:54

Mitya

34.8k15 gold badges70 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1567014 Over a year ago

Ok so does that mean that it's disabled because it's on an eBay.com site? Is there any way around this?

user1567014 Over a year ago

I mean is there another type of script or another function that will do the same thing?

Mitya Over a year ago

No - it's a default policy, it's not specifically about eBay. Check out the link I provided re: SOP. Unless the target expressly allows calling over cross-domain AJAX, you will not be able to do it. Re: your second comment, no - as I say, it's a policy governing all of client-side programming, not a limitation specific to jQuery or the function you're using.

Ivan · Accepted Answer · 2012-07-31 21:53:33Z

1

It works in the first case since the request you are making is on the same domain as the website it is hosted on. In the second case, store.ebay.com is making the request, and due to security features in modern browsers, that cross domain request is not allowed.

answered Jul 31, 2012 at 21:53

Ivan

10.4k12 gold badges49 silver badges79 bronze badges

Comments

Oscar Jara · Accepted Answer · 2012-07-31 21:55:50Z

0

1. load(); will work if the url you are using is under the same domain.

2. If you want to load external content like store.ebay.com use a proxy, if you are using PHP you can make a PHP file that gets the source from that site using cURL. Otherwise you won't be able to achieve what you want cause of Access-Controll-Allow-Origin rule (that means that you can load external content that is not in your domain).

answered Jul 31, 2012 at 21:55

Oscar Jara

14.2k10 gold badges64 silver badges94 bronze badges

2 Comments

user1567014 Over a year ago

Thanks for the suggestion, I will look into the PHP option for sure.

Oscar Jara Over a year ago

Just to know, this is the way to use the proxy, check this out: jquery-howto.blogspot.com/2009/04/…

Collectives™ on Stack Overflow

Using JQuery to embed an external HTML file

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related