强制iFrame链接(在嵌入式Google文档中)在新窗口中打开

时间:2010-12-07 13:52:51

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

非常奇怪的是,似乎无法在新窗口中设置Google文档链接。 (目标= “_空白”)。

发布Google文档并使用嵌入功能时,会生成iframe代码段:

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

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

有什么办法可以在新窗口中打开这些链接吗?我知道可能存在跨框架脚本问题,所以很奇怪谷歌没有简单的方法来实现这个目标......

4 个答案:

答案 0 :(得分:5)

好的,由于缺乏更好的替代方案,我决定在将其加载到iFrame中之前使用Curl Google Doc URL并执行一些jQuery魔术。

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,这真的是推荐的解决方法吗? ;)

答案 1 :(得分:3)

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

答案 2 :(得分:0)

一种更简单的非编码解决方法是嵌入 Google云端硬盘中的Google文档,而不是“已发布”的Google文档。 权限可以使您确保文档的观看和分发受到限制。

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

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

答案 3 :(得分:0)

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

上述与 CURL 相关的解决方案对我们不起作用,因为我们需要为文档编辑器简化此操作。

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

  1. 像往常一样发布 Google 文档。
  2. 在提供的 iframe 嵌入代码中,将 src 属性替换为 URL,格式如下:https://docs.google.com/document/d/e/ENTER_YOUR_DOCS_ID/pub?preview

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