Skip to content

Instantly share code, notes, and snippets.

@pankaj28843

pankaj28843/example.html

Last active March 9, 2017 17:45
Show Gist options
  • Save pankaj28843/1f2317a50eb2b506ed84 to your computer and use it in GitHub Desktop.
Save pankaj28843/1f2317a50eb2b506ed84 to your computer and use it in GitHub Desktop.
Download ZIP
A hack to open links in new window or parent in a published Google Doc which is embedded as iframe. Demo at https://cdn.rawgit.com/psjinx/1f2317a50eb2b506ed84/raw/example.html
Raw
example.html
<!DOCTYPE html>
<html>
<head>
<title>psjinx's Resume</title>
</head>
<body>
<iframe id="google-doc-iframe" srcdoc="" style="height: 1050px; margin: 0 auto;" align="middle" frameborder="0" width="100%" height="100%" scrolling="no">
</iframe>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$.get("https://docs.google.com/document/d/1Kpb8AQr-VAhVfzLGO7vlC_oOMlA6fZEBcyeTwlHnZHs/pub?embedded=true", function(html) {
$("#google-doc-iframe").attr("srcdoc", html);
setTimeout(function() {
$("#google-doc-iframe").contents().find('a[href^="http://"]').attr("target", "_blank");
$("#google-doc-iframe").contents().find('a[href^="https://"]').attr("target", "_blank");
}, 1000);
});
});
</script>
</body>
@christopherthomasdesign
Copy link

This is amazing, completely solved a problem I'd been struggling with for ages. Thanks!

@rlcauvin
Copy link

rlcauvin commented Mar 9, 2017

The solution from @stefek99 worked for me on Chrome and Edge, with one caveat. Some of the formatting of the Google doc was lost. Specifically, both browsers failed to show the page color I had defined for the Google doc (you can define a background color for a Google doc in Page Setup). The original solution by @psjinx shows the page color in Chrome but shows nothing whatsoever in Edge.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment