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?

回答1:

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.

回答2:

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);

来源：https://stackoverflow.com/questions/25395279/customize-css-of-google-docs-viewer

标签

css

google-docs

google-docs-api