javascript - 如何从 Internet Explorer 中删除共享点托管应用程序中的滚动条

Question

我开发了一个共享点托管应用程序，如您所知，它呈现为 iframe。当我在 Google Chrome 中使用它时，没有生成滚动条，但是在 Internet Explorer 11 中我仍然有滚动条；

我在这里展示了 2 个截图: 谷歌浏览器: http://screencast.com/t/Q5dOYmYKZu

互联网浏览器: http://screencast.com/t/yoUC9plY

该应用程序基于此插件: http://www.vissit.com/projects/eventCalendar/

我用来呈现日历和重新调整应用程序尺寸的代码如下所示:

var SPHostUrl;
var SPAppWebUrl;
var ready = false;

// this function is executed when the page has finished loading. It performs two tasks:
//    1. It extracts the parameters from the url
//    2. It loads the request executor script from the host web
$(document).ready(function () {
    var params = document.URL.split("?")[1].split("&");
    for (var i = 0; i < params.length; i = i + 1) {
        var param = params[i].split("=");
        switch (param[0]) {
            case "SPAppWebUrl":
                SPAppWebUrl = decodeURIComponent(param[1]);
                break;
            case "SPHostUrl":
                SPHostUrl = decodeURIComponent(param[1]);
                break;
        }
    }

    // load the executor script, once completed set the ready variable to true so that
    // we can easily identify if the script has been loaded
    $.getScript(SPHostUrl + "/_Layouts/15/SP.RequestExecutor.js", function (data) {
        ready = true;
        getItems();
    });
});

// this function retrieves the items within a list which is contained within the parent web
function getItems() {

    // only execute this function if the script has been loaded
    if (ready) {

        // the name of the list to interact with
        var listName = "Events";

        // the url to use for the REST call.
        var url = SPAppWebUrl + "/_api/SP.AppContextSite(@target)" +

            // this is the location of the item in the parent web. This is the line
            // you would need to change to add filters, query the site etc
          //  "/web/lists/getbytitle('" + listName + "')/items?" +
            "/web/lists/getbytitle('" + listName + "')/items?$select=Title,Category,EventDate,Description,EncodedAbsUrl,ID" +
            "&@target='" + SPHostUrl + "'";

        // create  new executor passing it the url created previously
        var executor = new SP.RequestExecutor(SPAppWebUrl);

        // execute the request, this is similar although not the same as a standard AJAX request
        executor.executeAsync(
            {
                url: url,
                method: "GET",
                headers: { "Accept": "application/json; odata=verbose" },
                success: function (data) {

                    // parse the results into an object that you can use within javascript
                    var results = JSON.parse(data.body);
                    var events = [];
                    $.each(results.d.results, function (i, obj) {
                        //use obj.id and obj.name here, for example:
                        var event = {
                            date: Date.parse(obj.EventDate).toString(),
                            type: obj.Category,
                            title: obj.Title,
                            description: obj.Description,
                            url: obj.EncodedAbsUrl + 'DispForm.aspx?ID=' + obj.ID
                        }
                        events.push(event);
                    });
                    var myJsonString = JSON.stringify(events);

                    $("#eventCalendarInline").eventCalendar({
                        jsonData: events,
                        openEventInNewWindow: true,
                        showDescription: true,
                        txt_GoToEventUrl: "Go to event"
                    });

                    Communica.Part.init();

                },
                error: function (data) {

                    // an error occured, the details can be found in the data object.
                    alert("Ooops an error occured");
                }
            });
    }
}

window.Communica = window.Communica || {};

Communica.Part = {
    senderId: '',

    init: function () {
        var params = document.URL.split("?")[1].split("&");
        for (var i = 0; i < params.length; i = i + 1) {
            var param = params[i].split("=");
            if (param[0].toLowerCase() == "senderid")
                this.senderId = decodeURIComponent(param[1]);
        }


        this.adjustSize();
    },

    adjustSize: function () {
        var step = 30,
            newHeight,
            contentHeight = $('#eventCalendarInline').height(),
            resizeMessage = '<message senderId={Sender_ID}>resize({Width}, {Height})</message>';

        newHeight = (step - (contentHeight % step)) + contentHeight;

        resizeMessage = resizeMessage.replace("{Sender_ID}", this.senderId);
        resizeMessage = resizeMessage.replace("{Height}", newHeight);
        resizeMessage = resizeMessage.replace("{Width}", "100%");

        window.parent.postMessage(resizeMessage, "*");
    }
};

如您所见，adjust sice 仅在日历呈现后执行。 我尝试将 newheight 更改为固定高度 200,300、500，但没有任何效果。

这是插件生成的HTML

<html><head>
        <title></title>

        <script src="../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="/_layouts/15/MicrosoftAjax.js" type="text/javascript"></script>
        <script src="/_layouts/15/sp.runtime.js" type="text/javascript"></script>
        <script src="/_layouts/15/sp.js" type="text/javascript"></script>

        <!-- Grid CSS File (only needed for demo page) -->
        <link href="../Content/paragridma.css" rel="stylesheet">

        <!-- Core CSS File. The CSS code needed to make eventCalendar works -->
        <link href="../Content/eventCalendar.css" rel="stylesheet">

        <!-- Theme CSS file: it makes eventCalendar nicer -->
        <link href="../Content/eventCalendar_theme_responsive.css" rel="stylesheet">

    </head>
    <body>
        <div class="eventCalendar-wrap" id="eventCalendarInline" data-current-month="10" data-current-year="2014"><div class="eventsCalendar-slider" style="height: 212px;"><div class="eventsCalendar-monthWrap currentMonth" style="width: 262px;"><div class="eventsCalendar-currentTitle"><a class="monthTitle" href="#">November 2014</a></div><ul class="eventsCalendar-daysList showAsWeek showDayNames"><li class="eventsCalendar-day-header">Mon</li><li class="eventsCalendar-day-header">Tue</li><li class="eventsCalendar-day-header">Wed</li><li class="eventsCalendar-day-header">Thu</li><li class="eventsCalendar-day-header">Fri</li><li class="eventsCalendar-day-header">Sat</li><li class="eventsCalendar-day-header">Sun</li><li class="eventsCalendar-day empty"></li><li class="eventsCalendar-day empty"></li><li class="eventsCalendar-day empty"></li><li class="eventsCalendar-day empty"></li><li class="eventsCalendar-day empty"></li><li class="eventsCalendar-day " id="dayList_1" rel="1"><a href="#">1</a></li><li class="eventsCalendar-day " id="dayList_2" rel="2"><a href="#">2</a></li><li class="eventsCalendar-day today" id="dayList_3" rel="3"><a href="#">3</a></li><li class="eventsCalendar-day " id="dayList_4" rel="4"><a href="#">4</a></li><li class="eventsCalendar-day " id="dayList_5" rel="5"><a href="#">5</a></li><li class="eventsCalendar-day " id="dayList_6" rel="6"><a href="#">6</a></li><li class="eventsCalendar-day " id="dayList_7" rel="7"><a href="#">7</a></li><li class="eventsCalendar-day " id="dayList_8" rel="8"><a href="#">8</a></li><li class="eventsCalendar-day " id="dayList_9" rel="9"><a href="#">9</a></li><li class="eventsCalendar-day " id="dayList_10" rel="10"><a href="#">10</a></li><li class="eventsCalendar-day " id="dayList_11" rel="11"><a href="#">11</a></li><li class="eventsCalendar-day " id="dayList_12" rel="12"><a href="#">12</a></li><li class="eventsCalendar-day " id="dayList_13" rel="13"><a href="#">13</a></li><li class="eventsCalendar-day " id="dayList_14" rel="14"><a href="#">14</a></li><li class="eventsCalendar-day " id="dayList_15" rel="15"><a href="#">15</a></li><li class="eventsCalendar-day " id="dayList_16" rel="16"><a href="#">16</a></li><li class="eventsCalendar-day " id="dayList_17" rel="17"><a href="#">17</a></li><li class="eventsCalendar-day " id="dayList_18" rel="18"><a href="#">18</a></li><li class="eventsCalendar-day " id="dayList_19" rel="19"><a href="#">19</a></li><li class="eventsCalendar-day " id="dayList_20" rel="20"><a href="#">20</a></li><li class="eventsCalendar-day " id="dayList_21" rel="21"><a href="#">21</a></li><li class="eventsCalendar-day " id="dayList_22" rel="22"><a href="#">22</a></li><li class="eventsCalendar-day " id="dayList_23" rel="23"><a href="#">23</a></li><li class="eventsCalendar-day " id="dayList_24" rel="24"><a href="#">24</a></li><li class="eventsCalendar-day " id="dayList_25" rel="25"><a href="#">25</a></li><li class="eventsCalendar-day " id="dayList_26" rel="26"><a href="#">26</a></li><li class="eventsCalendar-day " id="dayList_27" rel="27"><a href="#">27</a></li><li class="eventsCalendar-day " id="dayList_28" rel="28"><a href="#">28</a></li><li class="eventsCalendar-day " id="dayList_29" rel="29"><a href="#">29</a></li><li class="eventsCalendar-day " id="dayList_30" rel="30"><a href="#">30</a></li></ul></div><a class="arrow prev" href="#"><span>prev</span></a><a class="arrow next" href="#"><span>next</span></a></div><div class="eventsCalendar-list-wrap" style="width: 262px;"><p class="eventsCalendar-subtitle">Next events:</p><span class="eventsCalendar-loading" style="display: none;">loading...</span><div class="eventsCalendar-list-content"><ul class="eventsCalendar-list" style="left: 0px; height: auto; display: block; opacity: 1;"><li class="eventsCalendar-noEvents"><p>There are no events in this period</p></li></ul></div></div></div>

    <script src="../Scripts/moment.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.eventCalendar.min.js" type="text/javascript"></script>
    <script src="../Scripts/App.js" type="text/javascript"></script>

</body></html>

Answer 1

尝试在您的 adjustSize 方法中获取高度:

$('body').height();