I have been struggling with finding reliable answer to this question but no luck yet, so finally I am posting question here with a hope to find good possible answers from geeks out there.
Case Study: I have all my news articles (pages generated from database) residing on one of my servers. Now, I need to fetch those news (lets say the news inside a div) in another server with same styles and script they have.
What I have tried so far:
*proxy_page.php*
<?php
$url = isset($_GET['url'])? $_GET['url'] : "";
if($url!=''){
print file_get_contents($url);
}
?>
container page
$(document).ready(function(){
$('#newsContainer').load('proxy_page.php?url=http://www.carefusion.co.uk/news/index.php?country=UK');
});
<div id="newsContainer"></div>
My Question:
NOTE:
I strictly don't want to use iframes, so thats not an option at all.
Thanks in advance.
You should use cURL for this (get`s site content)...after receiving the response string you should parse it...but it could be very difficult...
Please share your ideas and suggest something that worked with you to achieve this.
Sure.
The way you choose is from stone age.
Nowadays a web developer have a more civilized methods to retrieve remote data, such as XML(RSS), SOAP, remote access to DB and so on.
Please note that with your current method an admin of "one of your servers" could easily ban your script.
What you are trying to do (judging by the update and added code samples) is to fetch content from another server with JavaScript.
However, you won't be able to just fetch the page as if it was loaded by the browser. You are going to fetch the data – this means the HTML. You then attach it to the DOM (to your documents elements tree) without the styles. You indeed need proxy in order to fetch the data from another server. There is also new Ajax, CORS – you may want to read about it, if you set a special header on the server side it will let you fetch from that server with AJAX without proxy, so if you have control over the server it may be the way to go.
You can use an iframe and just set its src attribute to whatever you want. That way you will preserve your styles: http://jsfiddle.net/D55ny/
UPD. I think you have wrong idea about the way styles are being applied to the page. When you fetch the contents with JavaScript, you are actually adding new markup to the same page.
The markup and the styles are two different things and you don't just fetch them together (unless it's iframe, but you don't want to use that).
You could fetch the content (with either of options, AJAX via proxy, CORS or JSONP) and then apply the CSS by fetching it too with something like this (using jQuery):
var link = $("<link>");
link.attr({
rel: 'stylesheet'
, href: 'path/to/your.css' // <-- change this to your path
});
$("head").append( link );
But beware that the parent's website's styles will apply to the new markup. So you need to encapsulate your presentation with classes and not use type selectors (such as h1, p, li etc.), you can read about modular encapsulated CSS on Jonathan Snook's SMACSS book, look into this presentation on Object-Oriented CSS by Nicole Sullivan or read about interesting approach that is used by Yandex and deals with the same problems of modularity and encapsulation over here (BEM)
UPD.2 A short answer to your question would be: You can't fetch data with AJAX, CORS or JSONP and have the CSS and JavaScript applied. Here's also a piece from jQuery load docs:
jQuery uses the browser's
.innerHTMLproperty to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as<html>,<title>, or<head>elements. As a result, the elements retrieved by.load()may not be exactly the same as if the document were retrieved directly by the browser.