Office.js web WORD add-in: window.open() method is not working with “about:blank” URL

Question

Summary:

window.Open(\'\') or window.Open(\'about:blank\') works with JavaScript in a normal html file as can be tested he

Answer 1

We are blocking those calls at the sandbox level, i strongly recommend you to use the ShowDialog API as suggested here Is there any Office.js API to get user input

Answer 2

import {POP_UP_HEIGHT, POP_UP_WIDTH} from '../constants';

/**
 * Handles interaction with the Office API for Common shared API.
 */
export default class Office {
  constructor(office) {
    this.office = office;
    this.dialog = null;
    this.callback = null;
  }

  /**
   * Store the callback function that will be invoked to
   * after pop-up message is received.
   * @param {string} url
   * @param {function} callback
   */
  openPopUp(url, callback) {
    this.callback = callback;
    this.office.context.ui.displayDialogAsync(url,
      {height: POP_UP_HEIGHT, width: POP_UP_WIDTH}, this.dialogCallback.bind(this)); // THIS IS WHAT YOU NEED
  }

  /**
  * Send the message from the child window (pop-up window)
  * To the parent window (Task pane window)
  * @param {string} message
  */
  messageFromPopUp(message) {
    this.office.context.ui.messageParent(message);
  }

  /**
   * The parent window will close the child window (pop-up)
   * and invoke the callback functionality
   * with a given message from the child window
   * @param {Object} event
   */
  dialogHandler(event) {
    this.dialog.close();
    this.callback(event.message);
  }

  /**
   * Store the child window (pop-up window) and create
   * an event handler to notify the parent window when
   * the child window sends a message to it
   * @param {Object} asyncResults
   * @param {string} asyncResults.status Status of the result, preferably 'succeeded'
   * @param {string} asyncResults.value
   */
  dialogCallback(asyncResults) {
    if (asyncResults.status === 'succeeded') {
      this.dialog = asyncResults.value;
      this.dialog.addEventHandler(this.office.EventType.DialogMessageReceived,
        this.dialogHandler.bind(this));
    }
    else {
      console.error(`Error: ${asyncResults.error.message}`);
    }
  }
}