15

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&amp;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 ...

4 Answers 4

6

Here's my solution, avoiding iframe srcdoc since it's not supported in IE. The 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/pub?id=1mfSz_3cWh6eW-X3EhQTtCoZ33Km131An8Kyvmuxi5oM&amp;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>
4
  • Thanks for sharing! Any relevant drawbacks of doing this? Commented Dec 26, 2016 at 15:37
  • 1
    @FabricioPH Relevant drawbacks - SEO - not sure if Google correctly index such page. Example of mine - genesis.re/cruitment - you can view the source.. Commented Dec 26, 2016 at 16:51
  • The gist link is 404, consider removing it. Commented Jan 18, 2023 at 12:44
  • First thought: you can edit the answer yourself, if that bothers you. Commented Jan 18, 2023 at 16:06
5

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

3
  • I know it has been a long time but was this the only way you got this working?
    – Matt
    Commented Jan 24, 2014 at 19:44
  • Unfortunately yes - but today there is hopefully a better solution!?
    – dani
    Commented Jan 25, 2014 at 20:41
  • Here is a client-side JS solution I found: gist.github.com/psjinx/1f2317a50eb2b506ed84
    – avioing
    Commented Jan 30, 2015 at 5:58
0

A simpler, non-coding workaround is to embed the google document from Google Drive, instead of the 'published' google doc. Permissions can allow you to ensure document viewership and circulation is restricted.

Follow this link and see the section under 'Google Drive'

This worked perfectly for us - links are opening without a warning that can frighten users.

0

We ran into the same issue on our resources page here (https://ingeniumschools.org/icms/resources) while using the Google Doc Publishing functionality. End users would see the drive.google.com refused to connect image due to the links attempting to open in the iframe. Google Refuses to Connect in iframe embed

The solution above related to CURL would not work for us since we needed to make this simple for the document editor.

I found this question offered a bit of a hint I thought I'd try.

  1. Publish the Google Doc as you would normally.
  2. In the iframe embed code provided, swap the src attribute with a URL in this format: https://docs.google.com/document/d/e/ENTER_YOUR_DOCS_ID/pub?preview

This will embed your document with some annoying google headers and footers, but the links will open up in a new window instead of the iframe.

Not the answer you're looking for? Browse other questions tagged or ask your own question.