Question

我正在努力将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调用加载）

我尝试了一系列不同的逻辑来尝试让它工作，但我尝试的一切都删除了网页的body标签中的所有HTML。（脚本标签仍在那里）

我发现有类似问题的人，但Google似乎已经改变了将这些小部件嵌入网站的方式。渲染任何以前的stackoverflow文档都没用。（至少从我发现的那个）

Answer 1

Google trend嵌入脚本在托管网站上创建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，它是否正确显示？

Answer 2

您可以改用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 个答案: