Question

我有一个包含单独标签的phtml页面

<div id="maintabs">
    <ul id='mainTabNav'>
        <li><a href="#maintabs-1">Tab 1</a></li>
        <li><a href="#maintabs-2">Tab 2</a></li>
    </ul>
    <div id="maintabs-1">
        <p><?php require_once VIEW_DIR."somewhere/tab1.phtml"; ?></p>
    </div>
    <div id="maintabs-2">
        <p><?php require_once VIEW_DIR."somewhere/tab2.phtml"; ?></p>
    </div>
</div>

每个标签/页面都有一个标题，其中包含特定于该页面的js源

<script src="js/tab<num>.js"></script>

在加载每个javascript文件时加载页面。有没有办法只加载当前打开的选项卡的js？当一个新标签打开时，js只用当前标签的js重新加载？

Answer 1

您可以在每个主要标签上保留点击事件，以便使用jQuery.getScript()之类的内容动态加载相应的javascript。

$('div[id^="#maintabs"]').click(function(e){
  var tabno = $( this ).index();
  $.getScript("js/tab"+tabno);
});

我想到的陷阱是，你似乎想要在加载最新的JS文件后将所有以前的javascript删除掉。我不确定这是否可行，或者你是否会产生副作用。

这也可以用香草JS完成，但是节省时间。

Answer 2

你能不能这样说：

awk '{rec = rec $0 RS} END{gsub(/[*][\/]/,SUBSEP,rec); gsub("\\n[\\/][*] @patch[^"SUBSEP"]+"SUBSEP,"",rec); gsub(SUBSEP,"*/",rec); printf "%s",rec}' file

进入你的某个地方/标签* .phtml？

Answer 3

有没有办法只加载当前打开的标签的js？

由于您使用的是PHP，因此可以设法传递当前页面的编号以进行查看。伪码

View::factory('templateView')
    ->set('page_number', $page_number)

$page_number变量现在可以轻松保存脚本中可以轻松使用的页码

<script src="js/tab<?php echo $page_number; ?>.js"></script>
...
<div id="maintabs">
    <ul id='mainTabNav'>
        <li><a href="#maintabs-1">Tab 1</a></li>
        <li><a href="#maintabs-2">Tab 2</a></li>
    </ul>

    <div id="maintabs-".<?php echo $page_number; ?>>
        <p><?php require_once VIEW_DIR."somewhere/tab".<?php echo $page_number; ?>.".phtml"; ?></p>
    </div>
</div>

Answer 4

使用纯Javascript，我相信如果您使用AJAX加载页面是可能的。

本教程http://code.tutsplus.com/tutorials/how-to-load-in-and-animate-content-with-jquery--net-26演示了一种将另一个页面（我称之为子页面）加载到主页面（我称之为索引页面）的方法。据我所知，如果在子页面而不是索引页面中包含关联的脚本标记，那么它们是动态的，因为它们在子页面加载时加载，并在子页面卸载时卸载。

我之前在自己的项目中使用过本教程的修改版本，我没有像教程所示那样创建与索引页面具有相同内容的子页面，而是仅使用整个子html文件只有子页面的内容。

以下是基于代码的示例：

indexScript.js：

/* When index.html is loaded and ready */
$(document).ready(function() {

    /* Handels on-click of menu buttons */
    $('#mainTabNav a').click(function(){

        /* Getting the linked page */
        var toLoad = $(this).attr('href');

        /* Hiding content and calling loadContent function - creates animation*/
        $('#contentDiv').hide('slow', loadContent);

        /* Injects content to contentDiv div tag */
        function loadContent(){
            $('#contentDiv').load(toLoad, '', showNewContent);
        }

        /* Shows contentDiv div */
        function showNewContent() {
            $('#contentDiv').show('normal');
        }

        demonstratePageChange(); //For testing - you can remove this

        /* In order to stop the browser actually navigating to the page */
        return false;

    });

    /* Initial Load - load first child page by simulation of clicking on it*/
    $('#maintabs_1').click();

});

/* To demonstrate the respective JS script is loaded as needed */
function demonstratePageChange() {
    setTimeout(function(){
        alert(testMsg); //Alerts the message from resepctive child page script
    }, 3000);
}

index.html：

<!DOCTYPE html>
<html>

<head></head>

<body>

    <div id='maintabs'>
        <ul id='mainTabNav'>
            <a id='maintabs_1' href='childA.html'><li>Tab 1</li></a>
            <a id='maintabs_2' href='childB.html'><li>Tab 2</li></a>
        </ul>
    </div>

    <div id='contentWrapper'>
        <div id='contentDiv'></div>
    </div>

</body>

<script type='text/javascript' src='jquery-2.1.1.min.js'></script>
<script type='text/javascript' src='indexScript.js'></script>

</html>

childA.html：

<div id='maintabs-1' class='contentBody'>
    <script type='text/javascript' src='childAScript.js'></script>
    Child A - Page
</div>

childAScript.js：

console.log("childAScript has been loaded");
var testMsg = "This is Child A";

childB.html：

<div id='maintabs-2' class='contentBody'>
    <script type='text/javascript' src='childBScript.js'></script>
    Child B - Page
</div>

childBScript.js：

console.log("childBScript has been loaded");
var testMsg = "This is Child B!!!!";

然而，使用此方法时需要考虑的事项很少：

这个特殊的方法需要jQuery
此方法不支持重新加载，您必须对其进行编码。即如果您在选项卡2上，则需要存储该事实并在刷新时指向选项卡2.
本地测试 - 据我所知，只有FF在本地测试时支持此功能。例如，如果您想在Chrome上进行测试，则需要将其上传到服务器上，然后才能运行。这是由于“XMLHttpRequest无法加载”错误，如果您在本地尝试此错误。

我希望这有助于解决您的问题。

Answer 5

使用AMD requirejs也可以做到这一点。虽然我更喜欢AMD模块，但可以使用纯js [即限定（）]。对于我的应用程序，取决于用户操作，代码将立即下载负载。 onclick事件在选项卡控件上触发，调用requirejs并下载脚本并调用它。 PsuedoExample：

<script type="text/javascript" src="require.js"></script>

$(document).ready(function() {
//Assuming using jQuery, use document.getElementById and what not otherwise

$('#maintabs-1').click(function(e) {
    require(['/js/tabnum1.js'], function (tab1) {
        tab1(doStuff);
    });
});

}

对多个标签使用for循环。此外，我尝试将尽可能多的处理[无数据存储和服务器验证（显然）]放入客户端。

可见时加载js

5 个答案: