在 iFrame 中嵌入带参数的 URL（Google DataStudio 报告）答案

【问题标题】：Embedding URL with Parameters in iFrame (Google DataStudio Report)在 iFrame 中嵌入带参数的 URL（Google DataStudio 报告）
【发布时间】：2019-09-03 04:41:31
【问题描述】：

我正在尝试将 Google Data Studio 报告 URL 作为 iframe 嵌入到 Wordpress 中。

使用 Data Studio 提供的报告 URL（嵌入报告）时可以正常工作： <iframe width="600" height="450" src="https://datastudio.google.com/reporting/1FcmV-tCfAEu-WdUk73QWPjRoiSEPuHIf/page/J09y" frameborder="0" style="border:0" allowfullscreen></iframe>

当URL带有用于行级过滤数据的参数时不起作用： <iframe width="600" height="450" src="https://datastudio.google.com/reporting/1FcmV-tCfAEu-WdUk73QWPjRoiSEPuHIf/page/J09y?config=%7B%22walcid%22%3A%7B%22walcid%22%3A%22abcd1234%22%7D%7D" frameborder="0" style="border:0" allowfullscreen></iframe>

但是，当您将其直接粘贴到浏览器中时，该 URL 确实有效。 https://datastudio.google.com/reporting/1FcmV-tCfAEu-WdUk73QWPjRoiSEPuHIf/page/J09y?config=%7B%22walcid%22%3A%7B%22walcid%22%3A%22abcd1234%22%7D%7D

当数据洞察报告 URL 包含参数时，Google 会设法防止跨域加载/嵌入。你能想出一种在我控制的域中加载参数化 URL 的方法吗？

我尝试了<iframe> <embed> <object> 但似乎没有任何效果。

任何指针表示赞赏！

【问题讨论】：

您可以使用 URL+参数嵌入 Data Studio 报告。无法防止跨域加载/嵌入。

标签： html iframe google-data-studio

【解决方案1】：

您的 src URL 不太正确。它们在https://datastudio.google.com/ 和/reporting/... 之间缺少embed，例如：

src="https://datastudio.google.com/embed/reporting/1FcmV-tCfAEu-WdUk73QWPjRoiSEPuHIf/page/J09y"

【讨论】：

【解决方案2】：

您好，我知道这可能是一个旧线程，但我想帮助任何可能面临此问题的人。

将params（查询参数的键）替换为config。如果您使用的是嵌入。

原始嵌入 iframe 应该是这样的

<iframe width="600" height="450" 
src="https://datastudio.google.com/embed/reporting/1FcmV-tCfAEu-WdUk73QWPjRoiSEPuHIf/page/J09y" frameborder="0" style="border:0" allowfullscreen>
</iframe>

如果你想使用参数，你可以让它成为

<iframe width="600" height="450" 
src="https://datastudio.google.com/embed/reporting/1FcmV-tCfAEu-WdUk73QWPjRoiSEPuHIf/page/J09y?config=%7B%22walcid%22%3A%7B%22walcid%22%3A%22abcd1234%22%7D%7D" frameborder="0" style="border:0" allowfullscreen>
</iframe>

我认为您错过了 URL 中 datastudio.google.com 之后的 /embed/。

我在https://developers.google.com/datastudio/solution/viewers-cred-with-3p-credentials找到这个

数据工作室的文档仍然需要改进。

希望对你有帮助。

【讨论】：

我能够形成上述所需的 url，但我的参数值在获得响应时没有得到更新。

【解决方案3】：

以下方法对我很有效。

创建报告 - 添加控件并指定要作为过滤依据的字段。
确保报告正确共享并可供所有人查看。
转到文件 > 报告设置。确保选中“在报告链接中启用查看器过滤器”，这至关重要。
通过单击共享菜单中的嵌入报告生成一个 iframe，并保留该 iframe。
现在在查看模式下，使用带有过滤器的图表/表格。这将为该过滤器生成一个唯一的 url，因此如果您要与某人共享此 url，它将使用您指定的过滤器打开。
获取此新 url 并将其替换为 iframe src 标记，确保将“嵌入”添加到此线程中其他答案中指定的新 url。
查看 url，您应该会看到您的过滤器值，您现在可以以编程方式替换 url 中的此值。
如果您想阻止人们应用不同的过滤器，您可以通过覆盖白色/背景匹配矩形来隐藏报表中的过滤器。一种超级肮脏的做法，但它也是最有效的。

iframe 中的 url 应该与此类似..

`https://datastudio.google.com/embed/reporting/foobar010120${FILTERVALUE}%20fhac`

或者你可以这样做：

let filterValue = 'a_specific_user_name';
url = `https://datastudio.google.com/embed/reporting/foobar010120${filterValue}%20fhac`;

然后在 iframe 中，添加src={url}

【讨论】：