How to load a cross-domain page using JavaScript
Question
I have a page on my site (let's say on domain A ) and I would like to pull in some more content into it from another page, say, on domain B . As a default, this functionality is blocked by the browsers for security reasons.
As far as I've found, there are a few ways to do this.
- CORS : As I understand, this method requires contributions from both the server and the client. The server needs to add a header to its response (ie Access-Control-Allow-Origin: [DOMAINS] , as of http://enable-cors.org/server.html ). On the other hand, the client needs to adjust their requests (eg http://www.html5rocks.com/en/tutorials/cors/ ).
- If using jQuery, there is this small plug-in which uses the YahooAPI (ie http://james.padolsey.com/snippets/cross-domain-requests-with-jquery/ ). The advantage of this is that the client can use it on its own to get pages from other domains. The catch is that Yahoo limits the number of requests per hour per IP, and for commercial use Yahoo's permission is needed.
- I've also read about JSONP but I haven't done much digging.
My question is: are there other possibly better options that I might be overlooking?
For the record, the site I'm working with is a huge commercial site with millions of users every day.
3 answers
solution1
2 2015-04-14 14:15:36
You can do JSONP, permit CORS and use plain JSON, use a DIY JSONP wrapper, or use a JSONP Proxy service. Here are the solutions in detail: JSONP with remote URL does not work
The easiest option in your situation is to roll your own JSONP proxy service. Here's a demo barebones PHP wrapper to get past CORS if you fetch a JSON string. No catch, no limits unlike Yahoo's YQL.
<?php
$callback = isset($_GET["callback"]) ? $_GET["callback"] : "?";
$json = file_get_contents('http://somedomain.com/someurl/results.json');
header('Access-Control-Allow-Origin: *');
header("Content-type: application/json");
echo $callback . "(" . $json . ");";
?>
solution2
0 2015-04-14 14:16:12
Are you trying to get content, or code? If you're trying to get content, is it possible to just use an iframe?
If you want code, I think the options you outlined are pretty much what you have available. JSONP might be your best bet due to browser support. For example, IE only supported it as of version 10. If you're on a site with millions of users per day, my guess is there are some folks on older versions of IE (unfortunately).
Edit: Depending on the content, another option is to introduce your own local proxy. For example, I've done things where I need to call WebServiceX on some other provider. I call the WebServiceX in server side code and implement my own web service that my JavaScript accesses. This means I'm not going cross domain because the cross domain access happens server-side, not client-side. It also allowed me to introduce caching and other things (depending on the type of data) that improved performance.
solution3
0 2015-04-14 15:23:44
Approach for cross domain data passing - create JavaScript object and assign source from another domain. Here is quick and dirty example:
File test.html:
<html> <body> Test done </body> <script> var s = document.createElement("script"); s.type='text/javascript'; s.src='test.js'; document.body.appendChild(s); </script> </html>
and test.js
abc={a:'A',b:'B',c:'C'}; alert(abc.a);
test.js could be in any domain and function alert() could be any function. I have more elegant ways to attach or run such approach but this one is sufficient enough to undersatnd the idea.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.