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

Question

I am trying to implement Bootstrap 3 Tabs in an App for Office but I keep getting the following exception: 我试图在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

Based on that it seems like Outlook 365 is appending &_xdm_Info=null|null|null but I don't understand why, how, or what to do about it if true. 基于此，似乎Outlook 365附加&_xdm_Info=null|null|null但我不明白为什么，如何或如何处理它，如果是真的。

Here is a whole simplified Home.html to illustrate the issue. 这是一个简化的Home.html来说明问题。 Note it will work fine is a JSFiddle or Bootply . 注意它可以正常工作是一个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>

Here is my call stack --> 这是我的调用堆栈 - >

    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: You can work around this issue by using <a data-target="#profile"> instead of <a href="#profile"> TL; DR：您可以使用<a data-target="#profile">代替<a href="#profile">解决此问题

Explanation: The Apps for Office framework relies on the office.js that is loaded from the app to communicate cross-frame with the host application (like Outlook). 说明： Office for Office框架依赖于从应用程序加载的office.js与主机应用程序（如Outlook）进行跨框架通信。 In order to preserve some states across page navigation, we append some information as URL fragment (like _xdm_Info) so that the second page of the app can talk to the host application as well. 为了在页面导航中保留一些状态，我们将一些信息作为URL片段（如_xdm_Info）附加，以便应用程序的第二页也可以与主机应用程序通信。

Meanwhile, Bootstrap uses <a> tags to navigate between tags, which is obviously the tag used for navigation used in HTML. 同时，Bootstrap使用<a>标签在标签之间导航，这显然是用于HTML中导航的标签。 From on here, I'll be honest and say I'm guessing a little bit, but it seems like for whatever reason, we are modifying the href attribute of the <a> tags from the app to insert the state information as URL fragment. 从这里开始，我会诚实地说我猜了一下，但似乎无论出于何种原因，我们正在从应用程序修改<a>标签的href属性以将状态信息作为URL片段插入。

From Bootstrap's tab.js: 来自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
}

As you can see here, the selector that the logic uses to display the tab is first trying to get the data-target attribute from the clicked tab selector, and then falls back to trying to use the href attribute. 正如您在此处所看到的，逻辑用于显示选项卡的选择器首先尝试从单击的选项卡选择器获取data-target属性，然后回退到尝试使用href属性。 From the error you attached, when it falls back to the href attribute, the value of that attribute is #profile&_xdm_Info=null|null|null instead of just #profile . 从您附加的错误中，当它回退到href属性时，该属性的值是#profile&_xdm_Info=null|null|null而不仅仅是#profile 。 This is why when var $target = $(selector) is run, jQuery's selector engine, Sizzle, complains because that is not a valid CSS selector. 这就是为什么当运行var $target = $(selector) ，jQuery的选择器引擎Sizzle会抱怨因为它不是一个有效的CSS选择器。

This is why the problem is eliminated by using the data-target attribute instead. 这就是使用data-target属性来消除问题的原因。 I believe that since it is not an attribute traditionally used for navigation, we don't muck with it. 我相信，因为它不是传统上用于导航的属性，所以我们不会贬低它。

Follow-up: I'm going to confirm that this is by design and not a bug, and that there is no better way to append _xdm_Info to the URL fragment. 后续：我将确认这是设计而不是错误，并且没有更好的方法将_xdm_Info附加到URL片段。 IIRC, Bootstrap is not the only Javascript/jQuery plugin that uses the href attribute to communicate CSS selectors to code, and we should try to enable this scenario instead of encouraging developers to work around it. IIRC，Bootstrap并不是唯一一个使用href属性将CSS选择器传递给代码的Javascript / jQuery插件，我们应该尝试启用这个场景，而不是鼓励开发人员解决它。 If this is indeed the only way to accomplish this, I'll push to have this included in the documentation. 如果这确实是实现这一目标的唯一方法，我将推动将其包含在文档中。

EDIT: I've followed up with the team that builds the Apps for Office framework about this issue. 编辑：我跟进了为此问题构建Apps for Office框架的团队。 It seems that indeed altering the href attributes of anchor tags in the app was part of the design. 似乎确实在应用程序中更改锚标签的href属性是设计的一部分。 However, the discussion on whether this was the right way to do it is moot because they have moved away from this design - new versions of office.js will no longer do this, so hopefully this will not block any other scenarios going forward. 然而，关于这是否是正确的方法的讨论是没有实际意义的，因为他们已经摆脱了这种设计 - 新版本的office.js将不再这样做，所以希望这不会阻止任何其他方案。

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-04-21 17:18:57

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-04-21 17:18:57

解决方案1
2 已采纳 2015-04-21 17:18:57