I have recently created a student organization website (i.e. www-sc.xxx.edu/studentorganizations/ourorganization). Our college does not allow us create dynamic websites so I needed to host some of the pages at a different domain (blog, news, etc..). Now, I want to mask that I hosted some websites at an external URL. So, for example if students visit news page, I want data loaded from external url without visitor realizing it. Is this possible with jquery, if yes, how?
Thank you all in advance.
Although these are quite unpopular now a day, I think that the most straightforward way to address your problem is by incorporating the external content within simple HTML iframes .
NOTE: I assume here that, by "does not allow us create dynamic websites", you mean that you do not have access to PHP or similar on that server
This is a tricky problem, because normally you can't use XMLHttpRequest to load data from a resource that doesn't have the same origin as the site you're currently at. This is for security reasons: if your javascript could load arbitrary data from anywhere, this opens the door to all kinds of cross-site scripting attacks.
If all you want to do is display data from an external URL, you can do it in an iframe. However, your ability to modify the presentation of that data will be extremely limited.
The standard solution for this is to write a server-side proxy that fetches the data from the external resource, then sends it to the client, but it sounds like you might not be able to do this.
However, it is possible to fetch third-party data using JSONP, if the data you're fetching is available in JSON format. jQuery supports this natively as of version 1.2.
... how about loading the externals into an iFrame? As in:
... if you can modify the src with jQuery as needed.
iFrames can be borderless and can integrate well with your webpage on most modern browsers. They seem like a pretty convenient choice for organisations.