可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

However, the demo is using JQuery, and I want to replace it with an existing AngularJs, modified to be a web add-in.

My file starts

<!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>

and gives the following consiole error:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://outlook.office.com') does not match the recipient window's origin ('https://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?

[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?)

回答1:

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.

I.e.

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

EDIT:

if you don't want jQuery

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

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.

文章来源: Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://outlook.office.com') does not match the recipient window's origin

标签

脚本

fabric

Failed to execute &#039;postMessage&#039; on &#039;DOMWindow&#039;: The target origin provided (&#039;https://outlook.office.com&#039;) does not match the recipient window&#039;s origin

问题:

回答1:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://outlook.office.com') does not match the recipient window's origin