Skip to content

Instantly share code, notes, and snippets.

@pankaj28843
Last active March 9, 2017 17:45
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pankaj28843/1f2317a50eb2b506ed84 to your computer and use it in GitHub Desktop.
Save pankaj28843/1f2317a50eb2b506ed84 to your computer and use it in GitHub Desktop.
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
<!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>
@micromaze
Copy link

This doesn't work in internet explorer. Anyone got any ideas on making it compatible with CORS?

@stefek99
Copy link

Arriving via: http://stackoverflow.com/questions/4377324/force-iframe-links-in-embedded-google-doc-to-open-in-new-window

That is embarrassing that we need to resolve to such hacks...

UPDATE: posted my answer here: http://stackoverflow.com/a/33715787/775359

@psjinx - please check if your thing works in IE (I'm afraid srcdoc may fail)

@mnatsakanyan
Copy link

This worked at me. Thanks!

@drosenstark
Copy link

This is awesome and fascinating: opens up the box on how to hack iFrames to do all kinds of things. Nice!

@drosenstark
Copy link

Or maybe not, evaluating still...

@christopherthomasdesign

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