Bootstrap 在 Outlook 365 部署的 Office 加载项中不工作

Question

我正在尝试在 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 or 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

Answer 1

TL;DR: 您可以使用 <a data-target="#profile"> 而不是 <a href="#profile">

解决此问题

说明： Apps 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 的新版本将不再这样做，所以希望这不会阻止任何其他场景的发展.

Bootstrap 在 Outlook 365 部署的 Office 加载项中不工作

Bootstrap not working inside Outlook 365 Deployed Office Add-in

jquery

office365

twitter-bootstrap

office365-apps

outlook-web-addins