强制 iFrame 链接（在嵌入的 Google Doc 中）在新窗口中打开答案

【问题标题】：Force iFrame links (in embedded Google Doc) to open in new window强制 iFrame 链接（在嵌入的 Google Doc 中）在新窗口中打开
【发布时间】：2011-05-21 14:39:20
【问题描述】：

很奇怪，似乎无法将 Google 文档链接设置为在新窗口中打开。 (target="_blank")。

发布 Google Doc 并使用嵌入功能时，会生成 iframe sn-p：

<iframe src="https://docs.google.com/document/pub?id=1mfSz_3cWh6eW-X3EhQTtCoZ33Km131An8Kyvmuxi5oM&amp;embedded=true"></iframe>

文档中的所有链接都将在 iFrame 中打开并通过 google 的重定向服务重定向： http://www.google.com/url?q=

有什么方法可以让这些链接在新窗口中打开？我知道可能存在跨框架脚本问题，所以很奇怪 Google 没有简单的方法来实现这一点......

【问题讨论】：

标签： html iframe hyperlink cross-domain google-docs

【解决方案1】：

好的，由于没有更好的选择，我决定在将 Google Doc URL 加载到 iFrame 之前先将其卷曲并做一些 jQuery 魔术。

Curl.php

curl_setopt($ch, CURLOPT_URL, $Url);
[...]
$("#header").hide()
$("#footer").hide()
$('a[href^="http://"]').attr("target", "_blank");

页面.html

$("#google_content").html("<iframe width='100%' height='600' frameborder='0' src='http://www.example.com/Curl/Curl.php'></iframe>");

Google，这真的是推荐的解决方法吗？ ;)

【讨论】：

我知道这已经很久了，但这是你让这个工作的唯一方法吗？
很遗憾，但是今天希望有更好的解决方案！？
这是我找到的一个客户端JS解决方案：gist.github.com/psjinx/1f2317a50eb2b506ed84

【解决方案2】：

用户avioing链接到GitHub gist：https://gist.github.com/psjinx/1f2317a50eb2b506ed84

这是一个很好的起点。

但是 - iframe srcdoc - 在 IE 中不受支持 - http://caniuse.com/#feat=iframe-srcdoc

我稍微修改的解决方案，样式是可选的。

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

【讨论】：

感谢分享！这样做有什么相关的缺点吗？
@FabricioPH 相关缺点 - SEO - 不确定 Google 是否正确索引此类页面。我的例子 - genesis.re/cruitment - 你可以查看源代码..

【解决方案3】：

一种更简单的非编码解决方法是嵌入 来自 Google Drive 的 google 文档，而不是“已发布”的 google 文档。权限可以让您确保文档查看和流通受到限制。

关注this link 并查看“Google 云端硬盘”下的部分

这对我们来说非常有效 - 链接打开时没有警告，可能会吓到用户。

【讨论】：

【解决方案4】：

在使用 Google 文档发布功能时，我们在此处的资源页面 (https://ingeniumschools.org/icms/resources) 上遇到了同样的问题。由于链接试图在 iframe 中打开，最终用户会看到 drive.google.com 拒绝连接图像。

上述与 CURL 相关的解决方案不适用于我们，因为我们需要为文档编辑器简化这一点。

我发现这个question 提供了一些我认为我会尝试的提示。

照常发布 Google 文档。
在提供的 iframe 嵌入代码中，将src 属性与URL 交换，格式如下：https://docs.google.com/document/d/e/ENTER_YOUR_DOCS_ID/pub?preview

这将在您的文档中嵌入一些烦人的谷歌页眉和页脚，但链接将在新窗口而不是 iframe 中打开。

【讨论】：