Load <head> </head> content from external page, specifically the stylesheets from the external page

Question

I have been trying to solution this for quite some time now. I have had a unique request from a friend to help them build a webpage that dynamically pulls a div tag from an external page (different server) so that when that page updates, it updates on this page. I solved that by utilizing jquery's .load to specify the .div to pull in, but the styling does not flow in as well since it does not reside within the div tag itself, but within the tags. So, I am trying to figure out how I can pull in the content, specifically the stylesheets if at all possible, from the other page and place it in the tags of my page.

I am at a loss on this and I would really appreciate some help.

Here is my page setup as I have it this moment:

proxy.php (pulls external page in)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<base target="_blank">
</head>

<body>
<?php
    $url = 'www.EXAMPLE.com/';
    $htm = file_get_contents($url);
    echo $htm;
?>
</body>
</html>

Actual page to display specific content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> - Products</title>
<?php 
$file = file_get_contents("proxy.php");
$head = preg_replace("#(.*)<head>(.*?)</head>(.*)#is", '$2', $file);
echo $head;
?>
<script language="javascript" type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="contentWrapper">
<div id="contentMain">
<script>
$("#contentMain").load("proxy.php #content");
</script>
</div>
</div>
</div>
</body>
<!-- InstanceEnd -->
</html>

Answer 1

You can create a cURL version of file_get_contents for remote files because allow_url_fopen most likely isn't set on your host's server for security reasons.

function curl_file_get_contents($url) {
    $ch = curl_init();

    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_TIMEOUT, 12);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    $result = curl_exec($ch);
    $status = curl_getinfo($ch, CURLINFO_HTTP_CODE);

    $curlError = curl_errno($ch);

    curl_close($ch);

    // Return result if we don't have errors, if there is a result, and if we have a 200 OK
    if (!$curlError && $result && $status == '200') {
        return $result;
    } else {
        return false;
    }
}

$stylesheet = curl_file_get_contents('http://www.example.com/css/style.css');
echo "<pre>";
var_dump($stylesheet);
echo "</pre>";

Load <head> </head> content from external page, specifically the stylesheets from the external page

Question

1 answers

solution1
0 2013-02-04 12:37:09

Load <head> </head> content from external page, specifically the stylesheets from the external page

Question

1 answers

solution1 0 2013-02-04 12:37:09

solution1
0 2013-02-04 12:37:09