Bootstrap在Outlook 365部署的Office加載項中不起作用

Question

我試圖在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

Answer 1

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將不再這樣做，所以希望這不會阻止任何其他方案。

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