Very oddly, there seems to be no way of setting Google Document links to open in a new window. (target="_blank").
When publishing a Google Doc and using the embed functionality, an iframe snippet is generated:
<iframe src="https://docs.google.com/document/pub?id=1mfSz_3cWh6eW-X3EhQTtCoZ33Km131An8Kyvmuxi5oM&embedded=true"></iframe>
All links in the document will be opened within the iFrame and redirected via google's redirect service:
http://www.google.com/url?q=
Is there any way I can make these links open in a new window? I know there might be cross-frame scripting issues so it's strange Google has no simple way of achieving this ...
OK, in lack of a better alternative I decided to Curl the Google Doc URL and do some jQuery magic before loading it in an iFrame.
Curl.php
curl_setopt($ch, CURLOPT_URL, $Url);
[...]
$("#header").hide()
$("#footer").hide()
$('a[href^="http://"]').attr("target", "_blank");
Page.html
$("#google_content").html("<iframe width='100%' height='600' frameborder='0' src='http://www.example.com/Curl/Curl.php'></iframe>");
Google, is this really the recommended workaround? ;)
User avioing linked to GitHub gist: https://gist.github.com/psjinx/1f2317a50eb2b506ed84
That's a good starting point.
However - iframe srcdoc
- is not supported in IE - http://caniuse.com/#feat=iframe-srcdoc
My slightly modified solution, styles are optional.
<style>
body { margin: 0; padding: 0; }
iframe { margin-left: 2vw; margin-top: 2vh; height: 90vh; width: 90vw; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<iframe srcdoc="" frameborder="0" scrolling="no"></iframe>
<script>
$(function() {
$.get("https://docs.google.com/document/d/1WUsQ_Kaa_tJljadPpHO2AFwvOAIqrYFS_zehUd6iCVk/pub?embedded=true", function(html) {
var contents = $("iframe").contents();
contents.find("html").html(html);
setTimeout(function() {
contents.find('a[href^="http://"]').attr("target", "_blank");
contents.find('a[href^="https://"]').attr("target", "_blank");
}, 1000); // Actually not sure if timeout is required here...
});
});
</script>