Question

以下是有效的MS Outlook Web加载项中文件的开头。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <title></title>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>

  <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>

  <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css" />
  <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css" />

  <script src="../../Assets/Scripts/jquery.fabric.js" type="text/javascript"></script>

  <link href="../../App.css" rel="stylesheet" type="text/css" />
  <script src="../../App.js" type="text/javascript"></script>

  <script src="Demo.js" type="text/javascript"></script>
</head>

但是，该演示使用的是JQuery，我想用现有的AngularJs替换它，将其修改为Web加载项。

我的文件开始

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />  
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script> 
    <script src="MyDialogView.js" type="text/javascript"></script> 
  <title>MyApp</title>
</head>

并给出以下提示错误：

无法在“ DOMWindow”上执行“ postMessage”：提供的目标原点（'https://outlook.office.com'与收件人窗口的原点（'https://localhost'）不匹配。

哪个看起来像CORS问题。但是为什么我不能从上面文件中获取它，该文件位于localhost的同一目录中？

我无法发布整个应用，但我希望这会引起某人的记忆……我做错了什么？

[更新]与一些类似的问题不同，它不涉及iframe。另外，添加<AppDomain>https://outlook.office.com</AppDomain>也无济于事（但是，为什么我复制的页面没有问题？）

Answer 1

您必须手动引导AngularJs应用程序，因为 Office.js 和 AngularJS 似乎在一起存在问题。尝试在angular.bootstrap()函数中使用Office.initialize()手动初始化AngularJs。手动引导AngularJ时，请注意不要在index.html中使用ng-app="myApp"。

即

Office.initialize = function () {
   $(document).ready(function () { // If you want jQuery too
      angular.bootstrap(document, ['myApp'])
   });
}
var app = angular.module('myApp', [// Other config...]);
// Your app config and code

编辑：

如果您不想要jQuery

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

如果您的 app.js 位于html底部</body>附近，甚至可以使用angular.bootstrap(document, ['myApp'])，因为DOM已经加载。 / p>

无法在“ DOMWindow”上执行“ postMessage”：提供的目标来源（“ https://outlook.office.com”）与收件人窗口的来源不匹配

1 个答案: