Javascript 可见时加载js_Javascript_Php_Html

Javascript 可见时加载js

javascript php html

Javascript 可见时加载js,javascript,php,html,Javascript,Php,Html,我有一个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> <di

我有一个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？

您可以在每个主选项卡上保留click事件，以便使用类似的方式动态加载相应的javascript

我认为这样做的一个陷阱是，一旦加载了最新的JS文件，您似乎希望清除所有以前的javascript。我不确定这是可行的还是会有副作用

同样，这完全可以通过vanilla JS来实现，但也可以节省时间。

你不能这样说：

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

进入您的某处/选项卡*.phtml

有没有办法只为当前打开的选项卡加载js

因为您使用的是PHP，所以可以将当前页面的编号传递给视图。伪码

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

$page\u 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>

>
“.phtml”？>

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

本教程演示了将另一个页面（我称之为子页面）加载到主页（我称之为索引页面）的方法。据我所知，如果在子页面而不是索引页面中包含关联的脚本标记，那么它们是动态的，在子页面加载时加载，在子页面卸载时卸载

我以前在自己的项目中使用过本教程的一个修改版本，我没有创建与本教程显示的索引页面内容相同的子页面，而是使用整个子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);
}

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

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

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>

childB.html：

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

< St>> >，使用该方法考虑的事情很少：

这个特殊的方法需要jQuery

此方法不支持重新加载，您必须对其进行编码。i、 e.如果您在选项卡2上，您需要存储该事实，在刷新时，返回到选项卡2

本地测试-据我所知，只有FF在本地测试时支持此功能。例如，如果你想在Chrome上测试它，你需要将它上传到服务器上，然后才能工作。这是由于“XMLHttpRequest无法加载”错误造成的，如果您在本地尝试此操作

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

使用AMD requirejs也可以做到这一点。虽然我更喜欢AMD模块[即define（）]，但可以使用纯js。对于依赖于用户操作的我的应用程序，代码是动态下载的，以减少负载。一个onclick事件在调用requirejs的选项卡控件上触发，脚本被下载并调用它。例如：

<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);
    });
});

}


$（文档）.ready（函数（）{
//假设使用jQuery，则使用document.getElementById以及其他一些
$（'maintabs-1'）。单击（函数（e）{
require（['/js/tabnum1.js']，函数（tab1）{
表1（doStuff）；
});
});
}

对多个选项卡使用for循环。此外，我尝试尽可能多地进行处理[SAN数据存储和服务器验证（显然）]进入客户端。

如问题所述，每个页面都有，但它们会立即从主页加载。我只想在选项卡可见时加载它们。是否还有“卸载”以前的js文件的方法？@depperm您能解释更多吗？只需删除行，

我感觉加载的脚本仍然存在，并且继承函数。假设tab1.js有一个函数foo（），tab2.js有一个函数foo（）。如果我在tab 2中，tab1.js中的第一个foo不会首先被调用，因为它是先加载的吗？我想删除以前加载的js，所以调用foo（）只会到达tab2.js foo function好吧，它甚至不会出现-php是服务器端脚本，因此来自服务器的响应甚至不会有您担心的行。如果加载内容（ajax）会怎么样在单击？后的选项卡中，在该内容的内部，将该内容添加到div，js将load@depperm你尝试过任何东西吗？旁注：index.html中包含的任何JS文件都是全局的，即所有子页面都可以访问它。
console.log("childBScript has been loaded");
var testMsg = "This is Child B!!!!";

<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);
    });
});

}