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

Asked 28/10, 2018 at 1:30 Answered 25/2, 2019 at 17:24

Summary:

window.Open('') or window.Open('about:blank') works with JavaScript in a normal html file as can be tested here. But it does not seem to work in an Office.js add-in.

Details:

On my Windows 10 desktop with VS2017 I created this Office.js WORD add-in project that works perfectly with my Microsoft Office Home and Student 2016 edition. In the same project, I then created a new button btnTest in the home.js file. When I click btnTest it successfully calls the following MyTest method and opens a new window with window.Open('some URL').

But in the same MyTest method when I call window.Open('about:blank') it does not open a blank page; instead, it opens windows 10 message box shown in screenshot below.

The goal here is that my code creates HTML string based on some content from WORD document and then use window.document.write(...) method to dynamically open that html in the browser as explained (and you can test) here. Question: How can I make window.Open('about:blank') method work?

function MyTest() {
        Word.run(function (context) {

            // window.open('https://www.google.com/'); this works
            var myWindow = window.open('about:blank'); //this does not work and, instead, displays the default Windows 10 message shown in screenshot below
            myWindow.document.write('<!DOCTYPE html><html><head></head><body><p>This is just a paragraph</p></body></html>');


            // Synchronize the document state by executing the queued commands,
            // and return a promise to indicate task completion.
            return context.sync().then(function () {
                //following (after un-commenting) does not work either
                //var myWindow = window.open('about:blank');
                //myWindow.document.write('<!DOCTYPE html><html><head></head><body><p>This is just a paragraph</p></body></html>');
            });
        })
            .catch(function (error) {
                console.log('Error: ' + JSON.stringify(error));
                if (error instanceof OfficeExtension.Error) {
                    console.log('Debug info: ' + JSON.stringify(error.debugInfo));
                }
            });
    }

Windows following message box pops up with OK button grayed out when window.open('about:blank'); is called:

NOTE: On the same desktop, I then created new this UWP AP with Javascript project and in the following method of their project, I un-commented their code and added window.open('about:blank');. When I call the following method there it successfully opens the default blank page there.

function sayHello() {
    //var messageDialog = new Windows.UI.Popups.MessageDialog("Hello, world!", "Alert");
    //messageDialog.showAsync();
    window.open('about:blank');
}

UPDATE:

How can I make it work from dialog? I tried the following but it did not work: I created this dialog Add-In. It works as it is. Then I commented out the code of submit() function in Form.js file of the add-in in the new project and added window.open('https://www.google.com/'); line instead. When I click the Submit button of the dialog, it successfully opens the google website in default browser. But if I replace the above line with

var myWindow = window.open('about:blank');
myWindow.document.write('html here'');`

it shows the same warning window shown in image above

Statolith answered 28/10, 2018 at 1:30 Comment(0)

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

Auditorium answered 8/11, 2018 at 20:55 Comment(3)

Using ShowDialog API, how would one handle the dynamic html scenario? For instance, you retrieve html from WORD doc and before displaying that html in browser you want to modify the fonts and/or colors received from the WORD to fonts not supported in WORD. – Statolith 9/11, 2018 at 20:56

you can use the Office.js from the dialog if you need to. – Auditorium 10/11, 2018 at 0:3

I tried what you suggested in your comment above. But still the same message pops up as shown in the image of my original post above. I've added an UPDATE section in the post above to describe what I've tried. I maybe doing something wrong - please advise – Statolith 13/11, 2018 at 13:32

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}`);
    }
  }
}

Riendeau answered 25/2, 2019 at 17:24 Comment(0)

Recommended topics

Hot tags