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

发布于 2024-10-06 07:20:49 字数 485 浏览 5 评论 0原文

非常奇怪的是,似乎无法将 Google 文档链接设置为在新窗口中打开。 (目标=“_blank”)。

发布 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=

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

乄_柒ぐ汐 2024-10-13 07:20:49

这是我的解决方案,避免使用 iframe srcdoc 因为它不支持 IE。样式是可选的。

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

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&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>
时光暖心i 2024-10-13 07:20:49

好吧,由于缺乏更好的替代方案,我决定在将 Google Doc URL 加载到 iFrame 之前,对 Google Doc URL 进行 Curl 并执行一些 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,这真的是推荐的解决方法吗? ;)

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

海之角 2024-10-13 07:20:49

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

请点击此链接并查看“Google 云端硬盘”下的部分,

这对我们来说非常有用- 链接在没有警告的情况下打开,可能会吓到用户。

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.

[旋木] 2024-10-13 07:20:49

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

上面与 CURL 相关的解决方案对我们来说不起作用,因为我们需要使文档编辑器变得简单。

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

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

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

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文