Force iFrame links (in embedded Google Doc) to open in new window

问题

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 ...

回答1:

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

回答2:

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>

回答3:

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.

来源：https://stackoverflow.com/questions/4377324/force-iframe-links-in-embedded-google-doc-to-open-in-new-window

标签

html

iframe

hyperlink

cross-domain

google-docs