Send a request to an Office add-in

Question

I am making an Excel addin with JavaScript API for Excel. The entry of the addin is addin.html, and it calls JS, CSS files. All the files are hosted in www.myexample.com.

When we click on a button in the addin, it will popup a browser window by window.open("https://www.myexample.com/post/", "popup"). The page with post.html as template is built by angularjs and ui-router. The server and the client are also hosted in www.myexample.com.

The controller of post.html needs to send request from time to time to addin.html. For example, post.html sends an address A1 to addin.html, and expects to receive the current value of Cell A1. It is easy for addin.html to get cell value from Excel with some async functions by JavaScript API for Excel. Whereas, my question is how to implement the request (of getting cell value from an address) in the controller of post.html.

If we use $http.post, is it possible to send a request to addin.html, which does not have a server?

var getValue = function (address) {
    return $http.post('...', { address: address })
        .then(function (res) {
             // maybe do something with res
             return res
        }
}

If we use postMessage, we could implement listeners in post.html, which are reactive. I can NOT imagine how to send actively a request and wait for a response.

Could anyone help?

Answer 1

If we open the popup browser by window.open as described in the OP, we could send data between the popup and the add-in by postMessage.

If we open a dialog box suggested by @MohamedShakeel we could send data by messageParent and localStorage.

Both of the two ways work.

I can NOT imagine how to send actively a request and wait for a response.

We could wait for a response, eg, a message from the add-in, by manually making a promise like here. Thus, we will be able to define

var getValue = function (address) {
    return sendRequestByPostMessage()
        .then(function () {
             return waitForResponse()
                 .then(function (res) {
                     // treatTheResponse
                 })
        })
}