JavaScript 不会第一次在新窗口上加载答案

【问题标题】：JavaScript doesn't load first time on new windowJavaScript 不会第一次在新窗口上加载
【发布时间】：2016-07-12 13:34:39
【问题描述】：

我得到了一个按照教程 (https://developers.google.com/picker/docs/) 实现了 google picker api 的 html 文件

我通过单击调用 windows.open() 的按钮在新窗口中打开该 html 文件

但不知何故，我第一次打开它时，什么都没有显示。我必须关闭窗口，然后再次单击打开它的按钮。

有什么帮助吗？

【问题讨论】：

将您的代码作为问题正文的一部分发布。可能与您如何处理加载事件或脚本标签的位置有关，但如果没有看到您的代码就不可能说出来。
请提供一个小提琴来展示你的代码。
将您的代码作为问题正文的一部分发布，而不是在 cmets 中。

标签： javascript google-picker

【解决方案1】：

你提供的 pastebin 代码没有帮助，所以我只是给你举了一个例子。

openwindow.html

//HTML page with a button that opens the googlepicker.html
<body>
<script src="js/scripts.js"></script>
<FORM> 
//fill in your appropriate URL
<INPUT type="button" value="New Window!" onClick="window.open('http://localhost:8000/googlepicker.html','window name','width=400,height=400')"> 
</FORM>
</body>

googlepicker.html

使用来自Google Picker sample的代码

<script type="text/javascript">

  // The Browser API key obtained from the Google Developers Console.
  var developerKey = 'xxxxxxxYYYYYYYY-12345678';

  // The Client ID obtained from the Google Developers Console. Replace with your own Client ID.
  var clientId = "1234567890-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com"

  // Scope to use to access user's photos.
  var scope = ['https://www.googleapis.com/auth/photos'];

  var pickerApiLoaded = false;
  var oauthToken;

  // Use the API Loader script to load google.picker and gapi.auth.
  function onApiLoad() {
    gapi.load('auth', {'callback': onAuthApiLoad});
    gapi.load('picker', {'callback': onPickerApiLoad});
  }

  function onAuthApiLoad() {
    window.gapi.auth.authorize(
        {
          'client_id': clientId,
          'scope': scope,
          'immediate': false
        },
        handleAuthResult);
  }

  function onPickerApiLoad() {
    pickerApiLoaded = true;
    createPicker();
  }

  function handleAuthResult(authResult) {
    if (authResult && !authResult.error) {
      oauthToken = authResult.access_token;
      createPicker();
    }
  }

  // Create and render a Picker object for picking user Photos.
  function createPicker() {
    if (pickerApiLoaded && oauthToken) {
      var picker = new google.picker.PickerBuilder().
          addView(google.picker.ViewId.PHOTOS).
          setOAuthToken(oauthToken).
          setDeveloperKey(developerKey).
          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>

<!-- The Google API Loader script. -->
<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>

当您单击该按钮时，它将打开一个指向 googlepicker.html 的窗口。希望对您有所帮助。

【讨论】：