无法在'DOMWindow'上执行'postMessage':提供的目标原点('https://outlook.office.com')与收件人窗口的原点不匹配 [英] Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://outlook.office.com') does not match the recipient window's origin
问题描述
以下是有效的MS Outlook Web加载项文件的开头.
The following is the start of a file form a working MS Outlook web add-in.
<!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加载项.
However, the demo is using JQuery, and I want to replace it with an existing AngularJs, modified to be a web add-in.
我的文件开始
<!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 ').
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://outlook.office.com') does not match the recipient window's origin ('https://localhost').
哪个看起来像CORS问题.但是为什么我不能从上面文件中获取它，该文件位于localhost的同一目录中?
Which looks like a CORS problem. But why did I not get it from the file above, which is in the same directory on localhost?
我无法发布整个应用，但是我希望这会引起某人的记忆……我做错了什么?
I can't post the entire app, but I am hoping that this strikes a chord in someone's memory ... What am I doing wrongly?
[更新]与一些类似的问题不同，它不涉及iframe.另外，添加<AppDomain>https://outlook.office.com</AppDomain>也无济于事(但是，为什么我复制的页面没有问题?)
[Update] unlike some similar questions, there are no iframes involved. Also, adding <AppDomain>https://outlook.office.com</AppDomain> did not help (but why should it, when the page I copied from had no problems?)
推荐答案
您必须手动引导AngularJs应用程序，因为 Office.js 和 AngularJS 似乎存在问题一起.尝试使用Office.initialize()函数中的angular.bootstrap()手动初始化AngularJs.手动引导AngularJ时，请注意不要在index.html中使用ng-app="myApp".
You must manually bootstrap your AngularJs app because Office.js and AngularJS seem to have problems to live together. Try to initilize AngularJs manually with angular.bootstrap(), within the Office.initialize() function. When you bootstrap AngularJs manually pay attention to not use ng-app="myApp" in index.html.
即
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
if you don't want jQuery
Office.initialize = function () {
angular.element(document).ready(function () {
angular.bootstrap(document, ['myApp'])
});
}
如果您的 app.js 位于html底部紧靠</body>的位置，甚至更多，您可以直接使用angular.bootstrap(document, ['myApp'])，因为DOM已经加载.
Or even more if your app.js is at the bottom of the html just near the </body> you can simply use angular.bootstrap(document, ['myApp']) because the DOM has already loaded.
这篇关于无法在'DOMWindow'上执行'postMessage':提供的目标原点('https://outlook.office.com')与收件人窗口的原点不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
