谷歌趋势嵌入正在破坏我的网页答案

【问题标题】：Google Trends embed is destroying my webpage谷歌趋势嵌入正在破坏我的网页
【发布时间】：2018-10-01 21:59:40
【问题描述】：

我正在竭尽全力将 Google 趋势图表嵌入我网站的某个部分。

理论上，这似乎很容易：

1.) 从 Google 复制脚本：

2.) 清除网页中的空间：

3.) 添加代码：

<div class="full-row4" style="height: 300px;">
  <script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1386_RC02/embed_loader.js"></script> 
  <script type="text/javascript"> 
    trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"/m/078rys","geo":"","time":"today 12-m"}],"category":0,"property":""},
     {"exploreQuery":"q=%2Fm%2F078rys&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}
    ); 
  </script> 
</div>

看起来很简单吧？错了！

每次我这样做，我都会得到这个结果：

经过进一步检查，我发现当加载这些脚本时，它会擦除我的整个网页。（注意：图表通过 AJAX 调用加载，其中包含整个活动页面减去导航栏）

我尝试了一系列不同的逻辑来尝试使其正常工作，但我尝试的所有操作都会删除网页正文标记中的所有 HTML。（脚本标签还在）

我发现有人遇到类似问题，但 Google 似乎改变了您将这些小部件嵌入网站的方式。使任何以前的 stackoverflow 文档变得无用。（至少从我发现的）

【问题讨论】：

标签： javascript jquery html embed google-trends

【解决方案1】：

你可以使用renderExploreWidgetTo()函数代替，它以DOM元素作为第一个参数：

var divElem = document.getElementById('wrapper');

trends.embed.renderExploreWidgetTo(divElem,"TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dbs%20bank&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});

【讨论】：

【解决方案2】：

Google 趋势嵌入脚本在托管网站上创建 iframe。 Here is a simple example.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  </head>
  <body>
    <h1>hello</h1>
    <div>
      <script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1386_RC02/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"dogs","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dogs&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}); </script>     
    </div>
    <h1>world</h1>
  </body>
</html>

如您所见，身体没有受到影响。问题可能不在于趋势脚本，而是更普遍的问题。

尝试在您的页面上创建一个 iframe，它是否正确显示？

【讨论】：

iframe 工作得很好！我刚刚尝试嵌入 youtube 视频，没有任何问题
少一些感叹号，更多细节会有所帮助。有什么错误吗？使用简单的 iframe，而不是 YouTube
你的页面是如何加载JS的？尝试在您自己的 js 代码之前/之后加载 embed_loader.js，它会改变行为吗？
我在应用加载时加载了所有 JS，然后通过 JSON 文件和 AJAX 加载所有网页。我尝试使用所有其他 JS 加载嵌入加载器，但它产生了相同的结果。我想我只是到了我会接受趋势嵌入根本无法在我的网站上工作的地步：/
另外，没有错误——来自不相关的 JQuery 事件的一些警告，但过去没有任何影响。你可以在这里看到我在说什么：dev.cryptotrack.live |用户名：test |密码：通过