CODEWITHSUNDEEP
cssgoogle-docsgoogle-docs-api
Do Not Track Me
Do Not Track Me

Reputation: 2286

Customize CSS of Google Docs Viewer

How do i customize the CSS of the google docs view iframe?

I realize that the iframe is getting the content from a cross domain source which i do not control, i was just wondering if anyone has some sort of hack around this?

Upvotes: 2

Views: 6287

Answers (2)

rgk
rgk

Reputation: 1015

In addition to your answer, there's something else to consider. To catch relative path references, you can inject the following into the <head>:

<base href="http://docs.google.com/" target="_blank">

This way, all of their scripts will be loaded correctly without you needing to regex to replace "/ or something else equally unstable. In your PHP example:

$content = str_replace('<head>','<head><base href="http://docs.google.com/" target="_blank">', $content);

Upvotes: 3

Do Not Track Me
Do Not Track Me

Reputation: 2286

I asked this so i could post the solution. Its totally hacky and based off of a an answer from another thread on SO.

I had to make a few modifications to get it working because the answer linked above didn't quite work with google docs.

Basically you proxy the requests server side, modify the html and then relay the iframe contents.

<?php
if ( isset( $_GET['a'] ) && $_GET['a'] == 'gt') {
    // proxy xml content - must be done to avoid XSS failures (contains embedded link data and enables text selection)
    $code = gde_get_contents("https://docs.google.com/viewer?" . $_SERVER['QUERY_STRING']);
    header('Content-type: application/xml');
    echo $code;
} elseif ( isset( $_GET['a'] ) && $_GET['a'] == 'bi' ) {
    // proxy image content - prevents "too many redirects" on many-paged docs
    header( "Location: https://docs.google.com/viewer?" . $_SERVER['QUERY_STRING'] );
} elseif ( isset( $_GET['jsfile'] ) ) {
    // proxy javascript content - not doing anything here but Google changes return 404 if not proxied (??)
    $code = file_get_contents("https://docs.google.com/" . $_GET['jsfile']);  
    header('Content-type: text/javascript');  
    echo $code; 
} else {
  $content = file_get_contents('http://docs.google.com/viewer?url=http%3A%2F%2Fwww.someurlhere.com%2Fgoogledocs%2Ftest.docx&embedded=true');
  $content = str_replace('gview/resources_gview/client/js','/googledocs/index.php?jsfile=gview/resources_gview/client/js', $content);
  $content = str_replace('</head>','<link rel="stylesheet" href="http://www.example.com/google.css" /></head>', $content);
  header('Content-type: text/html; charset=utf-8');
  echo $content;  
}
?>

Make sure to change the line:

file_get_contents('http://docs.google.com/viewer?url=http%3A%2F%2Fwww.someurlhere.com%2Fgoogledocs%2Ftest.docx&embedded=true');

to the applicable url for the iframe you are trying to host.

Also change the line:

  $content = str_replace('</head>','<link rel="stylesheet" href="http://www.example.com/google.css" /></head>', $content);

To link to your stylesheet.

Upvotes: 7

Related Questions