javascript - 如何使 Kendo-ui 选项卡按需加载内容(带有源作为 java Controller 的 iframe)

Question

我是 Kendo-ui 的新手。我一直致力于创建一个包含 kendo-ui 选项卡的页面。每个选项卡都有至少一个 iframe，它从源(java Controller )加载内容。这是我的 jsp 的 trim 版本

<div class="demo-section k-content">
    <div id="tabstrip">
        <ul>
            <%} if(helpFlag.equals("true") || helpFlag.equals("1")) {%>
            <li>Help</li>
            <%} if(materialsFlag.equals("true") || materialsFlag.equals("1")) {%>
            <li class="k-state-active">Materials</li>
            <%}else{%>
                <script type="text/javascript">$(document).ready(function(){$("#tabstrip").kendoTabStrip().data("kendoTabStrip").select(0);});</script>
            <%} if(jobsFlag.equals("true") || jobsFlag.equals("1")) {%>
            <li>Jobs</li>
            <%} if(eProfileFlag.equals("true") || eProfileFlag.equals("1")) {%>
            <li>eProfile</li>
            <%}%>
        </ul>
        <%} if(helpFlag.equals("true") || helpFlag.equals("1")) {%>
        <div>
            <span class="">&nbsp;</span>
            <table style="width: 100%;">
                <tr>
                    <td style="">
                        <div class="panelbar">
                            <li class="k-state-active" style="font-weight: bold;">Help
                                <div class="tabBody">
                                    <iframe src="${pageContext.servletContext.contextPath}/help.do"
                                width="850px" height="650px"></iframe>
                                </div>
                            </li>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <%} if(materialsFlag.equals("true") || materialsFlag.equals("1")) {%>
        <div>
            <span class="">&nbsp;</span>
            <table style="width: 100%;">
                <tr>
                    <td style="">
                        <div class="panelbar">
                            <li class="k-state-active" style="font-weight: bold;">Materials
                                <div class="panelBody">
                                <img id="matloader" src="../loading.gif" width="36" height="36" alt="loading gif"/>
                                <iframe id="matFrame" style="display:none;" src="${pageContext.servletContext.contextPath}/materials.do"
                                    width="100%" height="500px"></iframe>
                            </div>
                            <script>
                                $(document).ready(function () {
                                    $('#matFrame').on('load', function () {
                                        $('#matFrame').show();
                                        $('#matloader').hide();
                                    });
                                });
                            </script>
                            </li>
                        </div>
                    </td>
                    <td style="">
                        <div class="panelbar">
                            <li class="k-state-active" style="font-weight: bold;">PURCHASING
                                <div class="panelBody">
                                <img id="purchasingloader" src="../loading.gif" width="36" height="36" alt="loading gif"/>
                                <iframe id="purchasingFrame" style="display:none;" src="${pageContext.servletContext.contextPath}/purch.do"
                                    width="100%" height="500px"></iframe>
                            </div>
                            <script>
                                $(document).ready(function () {
                                    $('#purchasingFrame').on('load', function () {
                                        $('#purchasingFrame').show();
                                        $('#purchasingloader').hide();
                                    });
                                });
                            </script>
                            </li>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <%} if(jobsFlag.equals("true") || jobsFlag.equals("1")) {%>
        <div>
            <span class="">&nbsp;</span>
            <div class="jobs">
                <div class="panelbar">
                    <li class="k-state-active" style="font-weight: bold;">Jobs
                        <div class="panelBody">
                            <img id="loader1" src="../loading.gif" width="36" height="36" alt="loading gif"/>
                            <iframe id="jobsFrame" style="display:none;" src="${pageContext.servletContext.contextPath}/jobs.do"
                                width="100%" height="500px"></iframe>
                        </div>
                        <script>
                            $(document).ready(function () {
                                $('#jobsFrame').on('load', function () {
                                    $('#jobsFrame').show();
                                    $('#loader1').hide();
                                });
                            });
                        </script>
                </div>
            </div>
        </div>
        <%} if(eProfileFlag.equals("true") || eProfileFlag.equals("1")) {%>
        <div>
            <span class="">&nbsp;</span>
            <div class="eProfile">
                <div class="panelbar">
                    <li class="k-state-active" style="font-weight: bold;">eProfile                          <div class="panelBody">
                        <img id="eProLoader" src="../loading.gif" width="36" height="36" alt="loading gif"/>
                            <iframe id="eProFrame" style="display:none;" src="${pageContext.servletContext.contextPath}/eProfile.do"
                                width="100%" height="500px"></iframe>
                        </div>
                        <script>
                            $(document).ready(function () {
                                $('#eProFrame').on('load', function () {
                                    $('#eProFrame').show();
                                    $('#eProLoader').hide();
                                });
                            });
                        </script>
                    </li>
                </div>
            </div>
        </div>
        <%} %>
    </div>
</div>

选项卡是可配置的，我正在读取属性文件以查看需要显示哪些选项卡。所以 jsp 的开始部分检查需要显示哪些选项卡，因此我正在制作一个列表。其余部分没有太多条件，除非需要显示选项卡。现在，发生的情况是所有选项卡都在加载 iFrame 内容，这使得微调器显示了相当长的一段时间，并且页面需要更多时间才能完全加载。我正在尝试有选择地加载内容，即默认选项卡应该首先加载，其余选项卡只有在单击这些选项卡时才加载。我查看了 kendo-ui API，但没有找到任何相关的解决方案。

我正在寻找一种可以使用 javascript 在 JSP 中实现的解决方案，或者如果有需要我也可以调用 Controller 。

Answer 1

因此，在删除 iframe 并使用 jquery 获取数据并显示在 div 中之后，我意识到其中一个 div 内容具有链接。单击这些链接会导致内容显示在主窗口中，而不是分区因此，我恢复了所做的更改并进行了以下更改，以便不会同时加载所有 iframe。

我从 iframe 中删除了 src 属性。我使用 onSelect 函数在单击选项卡时设置 src。

document.getElementById('myIframe').src = 'Controller_path';

这是我的代码的精简版-

$(document).ready(
        function() {
            $("#tabstrip").kendoTabStrip({
                animation : {
                    open : {
                        effects : "fadeIn"
                    }
                },
                select: onSelect
            }).data("kendoTabStrip");

            $(".panelbar").kendoPanelBar({
            });

            function onSelect(e) {
                loadDetails($(e.item).text());
            }

            function loadDetails(tab) {
                event.preventDefault();
                if(tab.length > 0) {
                    if(tab == 'Tab1') {
                        if(document.getElementById('Tab1Frame').src == '') {
                            document.getElementById('Tab1Frame').src = "${pageContext.servletContext.contextPath}/controller1.do";
                            document.getElementById('Tab12Frame').src = "${pageContext.servletContext.contextPath}/controller12.do";
                        }
                    } else if(tab == 'Tab2') {
                        if(document.getElementById('Tab2Frame').src == '') {
                            document.getElementById('Tab2Frame').src = "${pageContext.servletContext.contextPath}/controller2.do";
                        }
                    }
                }
            }
        });

它解决了性能问题。