发表新帖
发表新帖

How to unload a javascript from an html?

前端 未结
关注
7 2066
予麋鹿
予麋鹿 2020-11-28 10:27

How can I unload a JavaScript resource with all its defined objects from the DOM?

Im developing a simple framework that enables to load html fragments into a \"main\

相关标签:
7条回答
  • 自闭症患者
    2020-11-28 10:55

    perhaps you need to consider conditionally loading it rather than conditionally unloading it...

    0 讨论(0)
  • 天命终不由人
    2020-11-28 10:59

    If you need to unload a specific object, it's fairly easy: just set it to {}

    ie: myobj = {};

    So if you know what objects are created in a particular include, it won't be hard at all.

    On the other hand, if you don't know what objects are created in a particular include, there isn't a mechansim to find out - you can't ask Javascript to tell you what was defined in a particular include.

    However, I would say that if you don't know what objects are being loaded in a particular javascript file, you're probably not doing yourself any favours in loading it (you should always have a reasonable idea what code does in your site), or in trying to unload it manually (if you don't know what it does, that implies its a third party include, which means that unsetting it manually is likely to break things).

    0 讨论(0)
  • 情歌与酒
    2020-11-28 11:11

    This cannot be done.

    When a script is executed, function definitions are added to the global window object. There may be debugging symbols attached to the function that indicate where the function came from, but this information is not available to scripts.

    About the only way you could achieve something like this would be to create a pseudo-namespace in the script and then throw away that whole namespace when you are done with it. However, this question hints to me that you are trying to do something the wrong way. Perhaps elaborating on your scenario would help us provide alternate solutions.

    0 讨论(0)
  • 梦如初夏
    2020-11-28 11:14

    No, that is not possible. You could build a simple cleanup function that removes all variables that were defined in that file:

    var foo = 'bar';
var cleanup = function () {
    delete window.foo;
    delete window.cleanup;
};

// unload all resources
cleanup();

    Another approach would be to use a modular object structure for your fragments, that clean up after themselves. That involves a slightly higher overhead but is probably worth it, as it makes the code much easier to read and maintain:

    // creates the object using the second parameter as prototype.
// .create() is used as constructor
GlobalModuleHandlerThingy.addModule('my_module', {
    create: function () {
        this.foo = 'bar';
        return this;
    },
    foo: null,
    destroy: function () {
        // unload events, etc.
    }
});

GlobalModuleHandlerThingy.getModule('my_module').foo; // => bar
GlobalModuleHandlerThingy.unloadModule('my_module'); // calls .destroy() on the module and removes it.
    0 讨论(0)
  • 说谎
    2020-11-28 11:15

    I figured a trick for this. I was wondering here days finding an answer for this and I just realized a perfect trick to do this without trying to unload the java Script. only you have to do is create a global variable like currentPage in your main page's java script and when you loading the page assign the page name to currentPage . then in every other .js file use $('document').ajaxComplete() insted of $('document').ready() add an if statement as first line inside every $('document').ajaxComplete() function. set it to check currentPage variable equals to a new page name. add all other events inside if statement. i don't know English very well so check my code. and This is my first answer here so sorry if i make some mistakes.

    main.html

    <body>
    <div id='container></div>
    <button id="load1">
    <button id="load1">
</body>

    main.js

    var currentPage = "";

$(document).ready(function () {
    $('#load1').click(function () {
        loadSource('page1', 'body');
    });
    $('#load2').click(function () {
        loadSource('page2', 'body');
    });
});

function loadSource( page, element){
    currentPage = page;
    $('#container').load('views/' + page + '.php', element);
    $.getScript('js/' + page + '.js');
    $('#css').prop('disabled', true).remove();
    $('head').append('<link rel="stylesheet" href="css/' + page + '.css" type="text/css" />');
}

    all of my pages scripts and styles are in seperate folders views, js, css.

    page1.html

    <body>
    <button id="test1">
    <button id="test2">
</body>

    page1.js

    $(document).ajaxComplete(function () {
    if(currentPage == 'page1'){
        /*$('#test1').click(function () {
            console.log('page1');
        });*/
        $('#test2').click(function () {
            console.log('page1');
        });
    }
});

    page2.html

    <body>
    <button id="test1">
    <button id="test2">
</body>

    page2.js

    $(document).ajaxComplete(function () {
    if(currentPage == 'page2'){
        $('#test1').click(function () {
            console.log('page2');
        });
        /*$('#test2').click(function () {
            console.log('page2');
        });*/
    }
});

    i commented one button in each script to check if that button still has old script's affect.

    0 讨论(0)
  • 孤街浪徒
    2020-11-28 11:21

    you can make them = null 

        function fnc1 (){

    }

    window.fnc1  = null
    //or
    window["fnc1"]  = null
    0 讨论(0)
 看不清?
提交回复
热议问题