Question

很抱歉这个长标题。我在大约一周前在官方Salesforce开发者论坛上发布了这个问题，但仍然没有得到任何回复，所以我想我在这里问一下，看看我是否有更好的运气。

我有一个visualforce页面。它运行良好，直到我在右上角添加了嵌入式饼图。在我添加这些之后，我注意到导航栏开始溢出它的容器（通常应该将自身转换为下拉以获取其他菜单项）

这是我的VF代码：

<apex:page controller="SalesGoalsController" sidebar="false">
    <apex:stylesheet value="{!$Resource.MapStyles}" />
    <apex:includeScript value="{!$Resource.MapSettings}"/>
    <apex:includeScript value="{!$Resource.MapTabs}" loadonReady="true"/>

    <script type="text/javascript">
          // some javascript stuff that initializes some things here
          window.onload = function() {
               // a bunch of Visualforce.remoting.Manager.invokeAction()
               // calls that do not manipulate any elements on the page
               // whatsoever and i would never have any reason to suspect
               // that this would be what is causing this issue because
               // literally all these calls do is populate some arrays
          };
    </script>

    <div class="pagelabel">Maps</div>

    <div id="tabsContainer">
        <ul class="tabs">
            <li class="tab"><a href="#tab1">tab1</a></li>
            <li class="tab"><a href="#tab2">tab2</a></li>
        </ul>        
    </div>

    <div id="tab1" class="tabcontent">
        <div class="topleft">
            <div id="tab1Logo">
                <apex:image url="{!$Resource.tab1LogoSmall}"/>
            </div>
        </div>  

        <div class="topright">
            <div id="piechart-world" class="piechart">
                <analytics:reportChart reportId="areportIDgoeshere" size="tiny" showRefreshButton="false">
                </analytics:reportChart>
            </div>
            <div id="piechart-us" class="piechart">
                <analytics:reportChart reportId="areportIDgoeshere" size="tiny" showRefreshButton="false">
                </analytics:reportChart>
            </div>
            <div id="piechart-ca" class="piechart">
                <analytics:reportChart reportId="areportIDgoeshere" size="tiny" showRefreshButton="false">
                </analytics:reportChart>
            </div>
        </div>  

        <div class="ChartsContainer" >
            <font size="3" color="blue">  
                <p>Opportunities sold this year</p>
                <select id="tab1ChartView" onchange="setView(this)">
                    <option value="world">World</option>
                    <option value="usa">USA</option>
                    <option value="canada">Canada</option>
                </select>
            </font>
            <div id="tab1SalesChart" class="saleschart">
            </div> 
            <font size="3" color="blue">
                <p>RFQ received this year</p>
            </font>
            <div id="RFQChart" class="saleschart"></div>
        </div>
    </div>

    <div id="tab2" class="tabcontent">
        <div class="topleft">
            <div id="tab2Logo">
                <apex:image url="{!$Resource.tab2LogoSmall}"/>
            </div>
        </div> 

        <div class="topright">
            <div id="piechart-world" class="piechart">
                <analytics:reportChart reportId="aReportIDgoeshere" size="tiny" showRefreshButton="false">
                </analytics:reportChart>
            </div>
            <div id="piechart-us" class="piechart">
                <analytics:reportChart reportId="aReportIDgoeshere" size="tiny" showRefreshButton="false">
                </analytics:reportChart>
            </div>
            <div id="piechart-ca" class="piechart">
                <analytics:reportChart reportId="aReportIDgoeshere" size="tiny" showRefreshButton="false">
                </analytics:reportChart>
            </div>
        </div>

        <div class="ChartsContainer" >
            <font size="3" color="blue">  
                <p>Opportunities sold this year</p>
                <select id="tab2ChartView" onchange="setView(this)">
                    <option value="world">World</option>
                    <option value="usa">USA</option>
                    <option value="canada">Canada</option>
                </select>
            </font>
            <div id="tab2SalesChart" class="saleschart">
            </div> 
        </div>
    </div>
</apex:page>

这是我的CSS：

ul.tabs {
    overflow: hidden;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 3px solid;
    border-color: #1797C0;
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;
}

li.tab {
    list-style-type: none;
    float: left;
    display; inline;
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0px;
    margin: 0px;
    transition: 0.3s;
}

.tabs a {
    padding: 5px 10px;
    font-weight: bold;
    display: inline-block;
    background: #fff;
    color: #000;
    text-decoration: none;
}

.tabs a:hover {
    text-decoration: none;
    color: #1797C0;
}

.tabs a.active {
    background: #1797C0;
    color: #fff;
    text-decoration: none;
}

.topleft {
    float: left;
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}

.topright {
    float: right;
    position:absolute;
    right:10px;
    z-index: 11;
}

.piechart {
    display: none;
}

.pagelabel {
    position: relative;
    font-size: 1.5em;
    color: #222;
    margin: 10px;
}

.saleschart {
    width: 90vw;
    height: 90vh;
    padding-top: 15px;
}

.logo {
    display: inline;
    float: left;
}

.chartheader {
    color: #0000ff;
    font-size: 1.3em;
}

.maptotal {
    font-size: 1.5em;
    color: #222;
    display: inline;
    float: right;
    width: 60%;
}

我有一个javascript函数，它基本上设置除了其中一个饼图之外的所有显示：none（显示的那个是display：block），具体取决于用户所在的选项卡。我知道这很糟糕，但我无法找到更好的方法。

function showPiechart(piechart_name) {
    var elem_id = "piechart-" + piechart_name;
    for (var i=0, elem; elem = piechart_divs[i]; i++) {
        if (elem.id == elem_id) {
            elem.style.display = "block";
        } else {
            elem.style.display = "none";
        };
    };
};

Answer 1

因此，无论出于什么愚蠢的原因，如果你在Visualforce.remoting.manager.invokeAction();块内进行了一些window.onload = function() { ... }次调用，它就会破坏你的导航栏。事实上，据我所知，即使您没有拨打Visualforce.remoting.manager.invokeAction();电话，也可能会发生这种情况。如果所有块正在执行调用某些console.log("hello world");语句，甚至可能会发生这种情况。因此，要解决这个令人愤怒的愚蠢错误，你必须使用类似window.onready的东西。希望这可以帮助遇到类似问题的其他人，这样他们就不会花费6天的时间把他们的头发拉出去，试图像我一样解决问题！

更新：看起来有人已经解释了为什么在Visualforce页面中使用window.onload做任何事情 no bueno 。你可以在这里阅读：https://salesforce.stackexchange.com/questions/184589/window-onload-function-disables-inline-edit-capabilities-on-custom-vf-page

值得一提的是，Salesforce已将window.onload挂钩到自己的垃圾箱，其中包括拆除导航栏所需的任何功能。如果你自己在你的VF页面中挂钩，那就会覆盖他们所做的事情，所以他们的垃圾永远不会执行。你知道的越多......

如何解决嵌入分析引起的Visualforce导航栏溢出问题：reportCharts

1 个答案: