Как я могу выгрузить ресурс JavaScript со всеми его определенными объектами из DOM?
Я разрабатываю простой фреймворк, который позволяет загружать фрагменты HTML в «основной» HTML. Каждый фрагмент является автономным и может содержать ссылки на дополнительные файлы JS и CSS. Ресурсы JS и CSS анализируются и динамически добавляются в html. Когда фрагмент удаляется / заменяется из DOM, я хочу удалить его JS и CSS.
Если я удалю элемент script в примере ниже, функции, определенные в page1.js, все еще будут доступны.
<html>
<head>
<script src="page1.js" type="text/javascript"></script>
</head>
<body>
...
Есть ли способ выгрузки объектов page1.js из DOM?
========= Используемый мной тестовый код =======
Я попробовал совет, который получил в комментариях ниже; удалить добавленные объекты с помощью функции очистки - но даже это не удается. Источники, которые я использовал для тестирования:
<html>
<head>
<script type="text/javascript">
function loadJSFile(){
var scriptTag = document.createElement("script");
scriptTag.setAttribute("type", "text/javascript");
scriptTag.setAttribute("src", "simple.js");
var head = document.getElementsByTagName("head")[0];
head.appendChild(scriptTag);
}
function unloadJSFile(){
delete window.foo;
delete window.cleanup;
alert("cleanedup. typeof window.foo is " + (typeof window.foo));
}
</script>
</head>
<body>
Hello JavaScript Delete
<br/>
<button onclick="loadJSFile();">Click to load JS</button>
<br/>
<button onclick="foo();">call foo()</button>
<br/>
<button onclick="unloadJSFile();">Click to unload JS</button>
</body>
</html>
simple.js источник:
var foo = function(){
alert("hello from foo");
}