[英]SharePoint add-in [SharePoint hosted app in Office 365] Rest api call Cross Origin Resource Sharing error?
[英]Bootstrap not working inside Outlook 365 Deployed Office Add-in
我试图在Office for Office中实现Bootstrap 3选项卡,但我不断收到以下异常:
Unhandled exception at line 1453, column 2 in https://localhost:44303/Scripts/jquery-2.1.3.js
0x800a139e - JavaScript runtime error: Syntax error, unrecognized expression: #profile&_xdm_Info=null|null|null
基于此,似乎Outlook 365附加&_xdm_Info=null|null|null
但我不明白为什么,如何或如何处理它,如果是真的。
这是一个简化的Home.html
来说明问题。 注意它可以正常工作是一个JSFiddle或Bootply 。
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title></title>
<script src="../../Scripts/jquery-2.1.3.js" type="text/javascript"></script>
<link href="../../Content/bootstrap.css" rel="stylesheet" type="text/css"/>
<script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap.js" type="text/javascript"></script>
<link href="../App.css" rel="stylesheet" type="text/css"/>
<script src="../App.js" type="text/javascript"></script>
<link href="Home.css" rel="stylesheet" type="text/css"/>
<script src="Home.js" type="text/javascript"></script>
</head>
<body>
<div id="content-main">
<!--<div class="padding">-->
<ul class="nav nav-pills">
<li class="active">
<a href="#home" data-toggle="tab">Home</a>
</li>
<li>
<a href="#profile" data-toggle="tab">Profile</a>
</li>
<li>
<a href="#messages" data-toggle="tab">Messages</a>
</li>
</ul>
<div id='content' class="tab-content">
<div class="tab-pane active" id="home">
<ul>
<li>home</li>
<li>home</li>
<li>home</li>
<li>home</li>
<li>home</li>
<li>home</li>
<li>home</li>
</ul>
</div>
<div class="tab-pane" id="profile">
<ul>
<li>profile</li>
<li>profile</li>
<li>profile</li>
<li>profile</li>
<li>profile</li>
<li>profile</li>
<li>profile</li>
</ul>
</div>
<div class="tab-pane" id="messages">
</div>
</div>
</div>
</body>
</html>
这是我的调用堆栈 - >
Sizzle.error [jquery-2.1.3.js] Line 1453 Script
Sizzle.tokenize [jquery-2.1.3.js] Line 2067 Script
Sizzle.select [jquery-2.1.3.js] Line 2474 Script
Sizzle [jquery-2.1.3.js] Line 850 Script
find [jquery-2.1.3.js] Line 2690 Script
jQuery.fn.init [jquery-2.1.3.js] Line 2798 Script
jQuery [jquery-2.1.3.js] Line 76 Script
Tab.prototype.show [bootstrap.js] Line 2050 Script
Anonymous function [bootstrap.js] Line 2123 Script
each [jquery-2.1.3.js] Line 374 Script
jQuery.prototype.each [jquery-2.1.3.js] Line 139 Script
Plugin [bootstrap.js] Line 2118 Script
clickHandler [bootstrap.js] Line 2147 Script
jQuery.event.dispatch [jquery-2.1.3.js] Line 4429 Script
elemData.handle [jquery-2.1.3.js] Line 4115 Script
TL; DR:您可以使用<a data-target="#profile">
代替<a href="#profile">
解决此问题
说明: Office for Office框架依赖于从应用程序加载的office.js与主机应用程序(如Outlook)进行跨框架通信。 为了在页面导航中保留一些状态,我们将一些信息作为URL片段(如_xdm_Info)附加,以便应用程序的第二页也可以与主机应用程序通信。
同时,Bootstrap使用<a>
标签在标签之间导航,这显然是用于HTML中导航的标签。 从这里开始,我会诚实地说我猜了一下,但似乎无论出于何种原因,我们正在从应用程序修改<a>
标签的href属性以将状态信息作为URL片段插入。
来自Bootstrap的tab.js:
Tab.prototype.show = function () {
var $this = this.element
var $ul = $this.closest('ul:not(.dropdown-menu)')
var selector = $this.data('target')
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
}
正如您在此处所看到的,逻辑用于显示选项卡的选择器首先尝试从单击的选项卡选择器获取data-target
属性,然后回退到尝试使用href
属性。 从您附加的错误中,当它回退到href
属性时,该属性的值是#profile&_xdm_Info=null|null|null
而不仅仅是#profile
。 这就是为什么当运行var $target = $(selector)
,jQuery的选择器引擎Sizzle会抱怨因为它不是一个有效的CSS选择器。
这就是使用data-target
属性来消除问题的原因。 我相信,因为它不是传统上用于导航的属性,所以我们不会贬低它。
后续:我将确认这是设计而不是错误,并且没有更好的方法将_xdm_Info
附加到URL片段。 IIRC,Bootstrap并不是唯一一个使用href
属性将CSS选择器传递给代码的Javascript / jQuery插件,我们应该尝试启用这个场景,而不是鼓励开发人员解决它。 如果这确实是实现这一目标的唯一方法,我将推动将其包含在文档中。
编辑:我跟进了为此问题构建Apps for Office框架的团队。 似乎确实在应用程序中更改锚标签的href属性是设计的一部分。 然而,关于这是否是正确的方法的讨论是没有实际意义的,因为他们已经摆脱了这种设计 - 新版本的office.js将不再这样做,所以希望这不会阻止任何其他方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.