css - 自定义 Google 文档查看器的 CSS

Question

如何自定义 google 文档 View iframe 的 CSS？

我意识到 iframe 正在从我无法控制的跨域来源获取内容，我只是想知道是否有人对此有一些破解方法？

Answer 1

我问这个是为了发布解决方案。它完全是 hacky 和 ​​based off of a an answer from another thread on SO .

我必须进行一些修改才能使其正常工作，因为上面链接的答案不适用于谷歌文档。

基本上您代理请求服务器端，修改 html，然后中继 iframe 内容。

<?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;  
}
?>

确保更改行:

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

到您尝试托管的 iframe 的适用网址。

同时更改行:

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

链接到您的样式表。