无法关闭 Google 选择器 iframe答案

【问题标题】：Unable to close Google Picker Iframe无法关闭 Google 选择器 iframe
【发布时间】：2012-06-18 08:14:01
【问题描述】：

我正在使用 Google Picker api 访问我的 google 驱动器文件夹的文件。以下 html 页面使用选择器加载我的谷歌文档。但是，在我选择一个文档并按选择选项后，选择器对话框没有关闭。甚至当我按下 iframe 右上角的关闭按钮时。我认为问题出在选择器回调中，但我不知道如何解决这个问题。我在这里包含了 html 页面。

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Picker Example</title>

    <!-- The standard Google Loader script. -->
    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">

    // Use the Google Loader script to load the google.picker script.
    // google.setOnLoadCallback(createPicker);
    google.load('picker', '1');

    // Create and render a Picker object for searching images.
    function createPicker() {
        var picker = new google.picker.PickerBuilder().
            addView(google.picker.ViewId.DOCS).
            setCallback(pickerCallback).
            build();
        picker.setVisible(true);
    }

    // A simple callback implementation.
    function pickerCallback(data) {
      var url = 'nothing';
      if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
        var doc = data[google.picker.Response.DOCUMENTS][0];
        url = doc[google.picker.Document.URL];
      }
      var message = 'You picked: ' + url;
      document.getElementById('result').innerHTML = message;
    }
    </script>
  </head>
  <body>
    <div id="result">
      <button onclick="createPicker()">Upload Files </button>
      <iframe></iframe>
    </div>
  </body>
</html>

【问题讨论】：

标签： google-docs google-picker

【解决方案1】：

选择器需要一些跨域通信，如果您在本地打开页面（例如，从磁盘打开 html 文件），则无法完成。

在网络服务器上托管相同的页面，它应该可以按预期工作。

【讨论】：

这实际上不是问题......即使我在服务器上托管它也不起作用......我在下面发布了解决方案

【解决方案2】：

问题是我没有使用 google api 密钥来验证我与 google 的通信...一旦关闭被激活，它会使用 google 提供的 json 文件调用 pickercallback...当我没有验证时关键...

问题出在这条线...

<script src="http://www.google.com/jsapi"></script>

应该像..

<script src="http://www.google.com/jsapi?key=#########################"></script>

用您的 google api 控制台密钥替换 #'s....您可以在此处生成密钥 https://code.google.com/apis/console/

【讨论】：