JavaScript doesn't load first time on new window

Question

I got a html file that has the google picker api implemented following the tutorial ( https://developers.google.com/picker/docs/ )

I'm opening that html file in a new window, by clicking a button that calls windows.open()

But somehow, the first time I open it, nothing shows. I have to close the window, and click again on the button that opens it.

Any help?

Answer 1

The pastebin code you provided is not helping so I just made you an example.

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

Use the code from 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>

When you click the button, it will open a window to googlepicker.html. Hope that helps.

JavaScript doesn't load first time on new window

Question

1 answers

solution1
0 2016-07-14 08:14:04

JavaScript doesn't load first time on new window

Question

1 answers

solution1 0 2016-07-14 08:14:04

solution1
0 2016-07-14 08:14:04