Check if Office.js is loaded outside of Office client
If we load a Web page that refers to the office.js
Office an external client, we will get a warning: Office.js is loaded outside of Office client
.
This information is helpful.
Does anyone know if there is an API to test this inside my code?
Edit 1:
I am explaining my scenario a bit and why I am asking this question. I am making an app with angularjs that can be loaded in the browser as a web page or in Office as an add-in. And I understand that we shouldn't do <body ng-app="myApp">
both angular.bootstrap(document, ['myApp'])
together, otherwise the controllers will execute twice . So I decided not to write <body ng-app="myApp">
and always use angular.bootstrap
in both cases (i.e. webpage and add-on).
So, for a webpage, I could write:
$(document).ready(function () {
angular.bootstrap(document, ['myApp'])
})
app = angular.module('myApp', ['ui.router', 'ui.bootstrap'])
...
So, for a webpage, I need to write angular.bootstrap
inside Office.initialize
and share some other code with the add-in case:
Office.initialize = function (reason) {
$(document).ready(function () {
angular.bootstrap(document, ['myApp'])
});
}
app = angular.module('myApp', ['ui.router', 'ui.bootstrap'])
// share the same code
However, if I write these two cases together as follows, it works for the web page , whereas I give the Error: ng: btstrpd The application is already loaded with this element for the add-on .
$(document).ready(function () {
angular.bootstrap(document, ['myApp'])
console.log("bootstrapped outside Office.initialize")
})
Office.initialize = function (reason) {
$(document).ready(function () {
angular.bootstrap(document, ['myApp'])
console.log("bootstrapped inside Office.initialize")
})
}
app = angular.module('myApp', ['ui.router', 'ui.bootstrap']).
If I set the flag, the console will display bootstrapped outside Office.initialize
followed isBootstrapped
, then run the code showing that Office.context
or Office.context.document
is undefined :
var isBootstrapped = false;
$(document).ready(function () {
angular.bootstrap(document, ['myApp'])
isBootstrapped = true
console.log("bootstrapped outside Office.initialize")
})
Office.initialize = function (reason) {
$(document).ready(function () {
if (isBootstrapped) console.log("isBootstrapped")
else {
angular.bootstrap(document, ['myApp'])
console.log("bootstrapped inside Office.initialize")
}
})
}
app = angular.module('myApp', ['ui.router', 'ui.bootstrap'])
So I really need an efficient way to check if Office.js is loaded outside of the Office client (i.e. if it is a web page or an add-in) in order to decide which part angular.bootstrap
should be done.
source to share
One way is to use https://github.com/OfficeDev/office-js-helpers .
Both OfficeHelpers.Utilities.host
and OfficeHelpers.Utilities.platform
provide useful information.
source to share
At the moment there is no such API, although we already talked about the presence Office.ready()
(by analogy with $(document).ready(...)
), which will be triggered whenever Office.js is initialized (whether in add- or not).
We invite you to https://github.com/OfficeDev/office-js and post your link here. My thought about the API is that in a callback (for example $(document).ready(...)
) it will fire when it's ready and also be available in the form of a promise (so you can do await Office.ready()
). Do you think this works for your scenario?
FWIW: As a workaround for Script Lab, we assure Promise to Office.initialized (and make sure to do this at the beginning of the app download, otherwise it won't fire if it's much later), wait for it and if we don't get anything in the first 3 seconds, we'll show a set of buttons to allow the user to help disambiguate for us. See https://script-lab.azureedge.net/ for an example of how this looks. Not perfect, but OK for our scenario. I recommend that you post the suggestion error in the office-js repo, but adding your specific script to support it.
source to share