【问题标题】:Check if Office.js is loaded outside of Office client检查 Office.js 是否在 Office 客户端之外加载
【发布时间】:2018-01-12 16:13:49
【问题描述】:

如果我们在 Office 客户端外部加载引用 office.js 的网页,我们将收到警告:Office.js is loaded outside of Office client。

这些信息很有用。

有人知道我的代码中是否有 API 可以检查它吗?

编辑 1:

我稍微解释一下我的情况以及我问这个问题的原因。我正在使用 angularjs 制作一个应用程序,它可以作为网页加载到浏览器中,也可以作为加载项加载到 Office 中。而且我意识到我们不应该同时执行<body ng-app="myApp"> 和angular.bootstrap(document, ['myApp']),否则控制器将执行两次。所以我决定不写<body ng-app="myApp">,而在两种情况下都使用angular.bootstrap(即网页和插件)。

所以对于网页,我可以这样写:

$(document).ready(function () {
    angular.bootstrap(document, ['myApp'])  
})

app = angular.module('myApp', ['ui.router', 'ui.bootstrap'])
...

所以对于一个网页,我需要在Office.initialize里面写angular.bootstrap,并与插件的情况共享其他代码:

Office.initialize = function (reason) {
    $(document).ready(function () {
        angular.bootstrap(document, ['myApp'])
    });
}

app = angular.module('myApp', ['ui.router', 'ui.bootstrap'])
// share the same code

但是,如果我将这两种情况一起编写如下,它适用于网页,而我将Error: ng:btstrpd App Already Bootstrapped with this Element 用于加载项。

$(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']).

如果我设置一个标志,控制台将显示bootstrapped outside Office.initialize,后跟isBootstrapped,然后运行代码将显示Office.context 或Office.context.document 未定义:

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'])

所以我真的需要一种有效的方法来检查 Office.js 是否在 Office 客户端之外加载(即,它是网页还是加载项),以决定应该执行哪一部分 angular.bootstrap。

【问题讨论】:

  • 我只是made an issue,但显然他们无法快速制作 API,因此将不胜感激解决方法...
  • 这个功能(在加载项之外使用 Office.js)听起来很有希望,但我无法想象它是如何工作的。它如何连接到 Office 文件?该应用程序如何使用 Office.js?我找不到任何文档。
  • 目标不是在外接程序外使用Office.js。只是因为这个应用程序同时为一个网站和一个 Office 加载项提供服务,所以对于这两种情况都可以轻松加载 Office.js。但我们确实需要检查代码是否作为网站或加载项加载。

标签: ms-office office-js


【解决方案1】:

目前还没有这样的 API,尽管我们在内部讨论过有一个 Office.ready()(在精神上类似于 $(document).ready(...)),它会在 Office.js 完成初始化时触发(无论是在 add-在与否)。

欢迎您在https://github.com/OfficeDev/office-js 上提出建议,并在此处发布链接。我对 API 的想法是它会接受一个回调(就像 $(document).ready(...) 它会在准备好时触发,并且也可以以承诺形式提供(所以你可以这样做 await Office.ready())。你认为这适用于你的场景?

FWIW:作为一种解决方法,对于Script Lab,我们将 Promise 包装在 Office.initialized 周围(并确保在加载应用程序的早期就这样做,否则如果太晚它就不会触发),等待它,如果我们在前 3 秒内没有收到任何东西,我们会显示一组按钮,让用户帮助我们消除歧义。请参阅 https://script-lab.azureedge.net/ 以了解其外观示例。不完美,但对于我们的场景来说还可以。不过,我鼓励您在 office-js 存储库中提交建议错误,并添加您的具体场景来支持它。

【讨论】:

  • 谢谢你,迈克尔...请参阅我的编辑 1。我不确定您的 Script Lab 解决方案是否适合我,您有解决方法吗?
  • 如果您无论如何都进行了初始化,但仍然有“Office.initialized”来设置您实际上在 Office 中的标志,该怎么办?我不知道要建议什么其他解决方法,但我再次鼓励您打开一个建议错误 - 直接来自客户,我认为这将有助于优先考虑(这样,您也将订阅以查看有关该问题的更新)。
  • 我实现了您为 Script Lab 所做的解决方法,它对我有用。然而,缺点是当我们将它作为网站加载到浏览器中时,我们需要再等待几秒钟。 Script Lab 也一样吗?
【解决方案2】:

一种方法是使用https://github.com/OfficeDev/office-js-helpers。

OfficeHelpers.Utilities.host 和 OfficeHelpers.Utilities.platform 都提供有用的信息。

【讨论】:

    猜你喜欢
    • 2021-08-28
    • 1970-01-01
    • 2016-05-19
    • 1970-01-01
    • 1970-01-01
    • 2015-01-27
    • 2013-01-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多