从 google-site 上的嵌入式（iframe）片段，引用存储在 google 驱动器上的 json 文件

Posted 2023-02-19

技术标签:

【中文标题】从 google-site 上的嵌入式（iframe）片段，引用存储在 google 驱动器上的 json 文件【英文标题】：From an embedded (iframe) snippet on google-site, reference a json file stored on google drive 【发布时间】：2022-01-21 13:56:46 【问题描述】：

我正在尝试在 google-site 中嵌入 html 格式的交互式图表。我使用 vega-lite 制作了这个情节。要将其从 google-sites“编辑模式”嵌入到 google-site，我选择 Insert>Embed>Embed code 并将 HTML 内容粘贴到框中。

vega-lite 图表采用 JSOn 格式编码的数据。可以从托管在 google drive 以外的其他地方的 JSON 文件读取输入数据，如本示例所示：https://vega.github.io/vega-lite/docs/data.html#url。但根据我的经验，vega-lite 无法从位于 google-drive 上的 json 文件中读取数据。

所以我的问题是：我可以读取位于 google-drive（私有/共享）上的 json 文件以在 google-sites 上显示 vega-lite 图吗？

我希望这是可能的。那太好了。它将大大简化交互式情节的呈现。

作为一个例子，这是我使用 vega-lite 生成的 HTML 文件的内容，我嵌入到了谷歌驱动器中

<!DOCTYPE html>
<html>
  <head>
    <title>Embedding Vega-Lite</title>
    <script src="https://cdn.jsdelivr.net/npm/vega@5.21.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.2.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.20.2"></script>
  </head>
  <body>
    <div id="vis"></div>

    <script type="text/javascript">
      var yourVlSpec = 
        $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
        description: 'A simple bar chart with embedded data.',
        data: 
          values: [
            a: 'A', b: 28,
            a: 'B', b: 55,
            a: 'C', b: 43,
            a: 'D', b: 91,
            a: 'E', b: 81,
            a: 'F', b: 53,
            a: 'G', b: 19,
            a: 'H', b: 87,
            a: 'I', b: 52
          ]
        ,
        mark: 'bar',
        encoding: 
          x: field: 'a', type: 'ordinal',
          y: field: 'b', type: 'quantitative'
        
      ;
      vegaEmbed('#vis', yourVlSpec);
    </script>
  </body>
</html>

我想提供存储在谷歌驱动器上的 json 文件中的数据并将其提供给datasets 字段，即代替

        data: 
          values: [
            a: 'A', b: 28,
            a: 'B', b: 55,
            a: 'C', b: 43,
            a: 'D', b: 91,
            a: 'E', b: 81,
            a: 'F', b: 53,
            a: 'G', b: 19,
            a: 'H', b: 87,
            a: 'I', b: 52
          ]
        ,

我想从 google-drive 上的 json 文件中获取 data，如下所示：

        data: "https://drive.google.com/uc?export=view&id=FILE_ID"

【问题讨论】：

您是否尝试过向 google drive api 发出 fetch 请求？我如何在 HTML 代码中做到这一点？我是否需要以某种方式格式化 URL？我不确定我是否遵循您的目标。标题中有错字。刚改正。对此感到抱歉。 IDK 嵌入式 sn-p 是什么。在你的问题中清楚地说明你在做什么以及你想要实现什么。即，我在 google.com 上嵌入了一个 iframe，并希望在我的 iframe 中检索 google 搜索查询。 【参考方案1】：

这似乎是对您的问题的跟进：Why is an image from google drive not displayed on google site through an embeded html, made using Altair (vega-lite)

与上一个答案一样，问题在于drive.google.com CORS 标头不允许访问来自其他域的驱动器资源。您可以通过使用curl 打印标题来确认这一点：

$ curl -I https://drive.google.com/uc?export=view&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc
HTTP/2 400 
content-type: text/html; charset=UTF-8
p3p: CP="This is not a P3P policy! See g.co/p3phelp for more info."
cross-origin-opener-policy-report-only: same-origin; report-to="coop_gse_l9ocaq"
<...>

这意味着您不能通过在另一个域上运行的 Javascript 访问此文件。没有办法解决这个问题：这是现代浏览器内置的安全功能。

【讨论】：

是的，这是后续行动。 :) 再次感谢您的回答！太糟糕了，这是不可能的。使用 google-sites 生成基于云的数据演示（私有/共享）会非常酷：（1）在 google 驱动器上托管数据 json 文件/图像，（2）从 google-sites 引用它们。我希望有一天，这样的事情是可能的。我会（绝望地）期待它。 :)

以上是关于从 google-site 上的嵌入式（iframe）片段，引用存储在 google 驱动器上的 json 文件的主要内容，如果未能解决你的问题，请参考以下文章

Ionic：无法在Android上的iFrame中显示facebook嵌入式帖子

如何将 swf 文件嵌入到网站上的浮动 iframe 中。书签？

在 github markdown 中嵌入 openstreetmap iframe

嵌入 iframe 的页面 history 流程（浏览器后退）

使用 admob 展示广告后，无法在 iOS 设备上的 ionic 应用程序的 iframe 内播放嵌入的 youtube 视频

如何同步iframe与嵌入内容的高度