How can I load content from another site onto mine with JavaScript/jQuery?

Question

I'm trying to get a wikipedia article to load onto my site. I'm trying to follow the instructions here: http://en.wikipedia.org/wiki/Wikipedia:WikiProject_Transwiki but I'm at a loss.

I've tried:

var xyz = document.getElementById(url("http://en.wikipedia.org/w/index.php?title=Special:Export&history=1&action=submit&pages=Albert_einstein")

var xyz = $('#xyz').load('http://en.wikipedia.org/w/index.php?title=Special:Export&history=1&action=submit&pages=Albert_einstein');

document.write(xyz);

You cannot without using server side process: http://en.wikipedia.org/wiki/Same_origin_policy — A. Wolff, Apr 10 '13 at 20:59
The way to do this client-side is simply to use an iFrame. Of course, you won't have any control over its content, but it will work. — Shazboticus S Shazbot, Apr 10 '13 at 21:01
@summea only if the external site supports JSONP (note the P) — Kevin B, Apr 10 '13 at 21:03
Is there a way to do it using Python or another language? They seemed to get it http://stackoverflow.com/questions/4460921/extract-the-first-paragraph-from-a-wikipedia-article-python , no? — Squirrl, Apr 10 '13 at 21:17

Agi Hammerthief · Answer 1 · 2013-04-10T21:34:42.357

1

You can't load content from a different domain than your own through JavaScript. The JS security policy prevents it.

"In computing, the same origin policy is an important security concept for a number of browser-side programming languages, such as JavaScript. The policy permits scripts running on pages originating from the same site – a combination of scheme, hostname, and port number^[1 – to access each other's methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites.^[1]"

-- Wikipedia, from W3C

Shazbot suggests an iframe, but iframes are deprecated. Use objects :

<div class="timeContainer" style="background:#333; color:#090; padding:10px 0;">
  <div style="text-align:center; width:100%;">Current Date and Time</div> <!-- Heading, replaceable with hx tag -->

<!--[if IE]>
 <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="your.url/" style="width:100%; height:19px;">
  <p>backup content</p>
 </object>
<![endif]-->

<!--[if !IE]> <-->
 <object type="text/html" data="your.url/" style="width:100%; height:19px;">
  <p>backup content</p>
 </object>
<!--> <![endif]-->
</div> <!-- timeContainer -->

Alternatively, you can use cURL (if your server supports it) through PHP. I'm not sure about Python, but I assume python can make use of cURL as well.

edited Apr 10 '13 at 21:34

answered Apr 10 '13 at 21:06

Agi Hammerthief

2,114
1
22
38

If the source supports jsonp - then this is not true , you can successfully transfer data cross-domian, and iframe was reccommended because it will allow to show another dommains content easily - how is he going to use objects to show wikipedia's content on his page without jsonp ?? – Scott Selby Apr 10 '13 at 21:08
@ScottSelby : Please see updated answer, including the object code. – Agi Hammerthief Apr 10 '13 at 21:29
Also, if my answer is wrong, then both Wikipedia and the W3C are wrong. – Agi Hammerthief Apr 10 '13 at 21:43
I took away down vote , and its not wrong , but there are ways around that restriction that are commonly used, almost every current website has some type of social media data all over the site that came from cross domain requests – Scott Selby Apr 10 '13 at 21:47
@ScottSelby : Thank you. I didn't know about JSONP until you mentioned it. I gave as complete an answer as I could, based on what knowledge I had at the time of answering it. – Agi Hammerthief Apr 10 '13 at 21:52
Okay thanks this is working great, but I had javascript running on `` and `
` tags on my page, and it's ignoring the object data, and I assume that's because it's not in the HTML when I view source. Is there a way to load all html, including the tags?
– Squirrl Apr 10 '13 at 21:55
@Squirrel, You are going in the wrong direction with this approach, sure you can load the data, but you will not be able to manipulate it in any ways because of the same origin policy. Use CORS. – plalx Apr 10 '13 at 22:25

plalx · Accepted Answer · 2013-04-10T22:26:43.870

If you are using a modern browser, you should be able to use CORS. According to the Wikipedia API docs, you need to pass an additionnal origin parameter that matches the Origin header sent by your browser.

http://en.wikipedia.org/w/api.php

"origin - When accessing the API using a cross-domain AJAX request (CORS), set this to the originating domain. This must match one of the origins in the Origin: header exactly, so it has to be set to something like http://en.wikipedia.org or https://meta.wikimedia.org . If this parameter does not match the Origin: header, a 403 response will be returned. If this parameter matches the Origin: header and the origin is whitelisted, an Access-Control-Allow-Origin header will be set."

Okay, thanks for the advice. I'll run through this [tutorial](http://www.html5rocks.com/en/tutorials/cors/) and I'll see where it takes me. Stay tuned :) — Squirrl, Apr 11 '13 at 03:54
Did you have any luck with CORS, esp. the tut you linked to? — Agi Hammerthief, May 16 '13 at 23:23

How can I load content from another site onto mine with JavaScript/jQuery?

2 Answers2

Linked