У вас есть JavaScript для загрузки содержимого каждого html-файла? Если это так, и у вас есть код JavaScript для запуска один раз загружен файл можно вызвать необходимые функции установки внутри функции нагрузки, как это:
base.html
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/pageA.js"></script>
<script type="text/javascript" src="js/pageB.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#loadPageA').on('click', function()
{
$('#contents').load('pageA.html', function()
{
setupPageA(); // defined in pageA.js
});
});
$('#loadPageB').on('click', function()
{
$('#contents').load('pageB.html', function()
{
setupPageB(); // defined in pageB.js
});
});
});
</script>
</head>
<body>
<div id="contents"></div>
<a id="loadPageA">Load Page A</a>
<a id="loadPageB">Load Page B</a>
</body>
<html>
Или если вы просто хотите для запуска pageA.js когда pageA.html загружается в вас просто может включать в себя элемент сценария pageA.js в странице pageA.html сама, как это:
pageA.html:
<div id="pageAContent">Page A</div>
<script type="text/javascript src="js/pageA.js"></script>
pageB.html:
<div id="pageBContent">Page B</div>
<script type="text/javascript src="js/pageB.js"></script>
base.html:
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#loadPageA').on('click', function()
{
$('#contents').load('pageA.html');
});
$('#loadPageB').on('click', function()
{
$('#contents').load('pageB.html');
});
});
</script>
</head>
<body>
<div id="contents"></div>
<a id="loadPageA">Load Page A</a>
<a id="loadPageB">Load Page B</a>
</body>
<html>
Динамический сценарий SRC решение:
base.html:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function loadScript(script)
{
// Modify the existing script tag
if($('#dynamicScriptTag').length != 0)
{
$('#dynamicScriptTag').attr('src', script);
}
else // Create script tag
{
$('<script>').attr('type', 'text/javascript')
.attr('src', script)
.attr('id', 'dynamicScriptTag')
.appendTo('head');
}
}
$(document).ready(function()
{
$('#loadPageA').on('click', function(event)
{
event.preventDefault();
$('#contents').load('pageA.html', function()
{
loadScript('js/scriptA.js');
testScriptB(); // test if we can still call a function in scriptB.js
});
});
$('#loadPageB').on('click', function(event)
{
event.preventDefault();
$('#contents').load('pageB.html', function()
{
loadScript('js/scriptB.js')
testScriptA(); // test if we can still call a function in scriptA.js
});
});
});
</script>
</head>
<body>
<div id="contents"></div>
<a id="loadPageA" href="#">Load Page A</a>
<a id="loadPageB" href="#">Load Page B</a>
</body>
</html>
pageA.html:
<div id="pageAContents">Page A</div>
pageB.html:
<div id="pageBContents">Page B</div>
JS/Scripta.ЯШИ:
console.log($('#pageAContents').text());
function testScriptA(){ console.log('Can still call testScriptA!'); }
JS/scriptB.js:
console.log($('#pageBContents').text());
function testScriptB(){ console.log('Can still call testScriptB!'); }
Единственная проблема с этим подходом заключается в том, что вы должны помнить, чтобы очистить элементы сценария после каждого изменения. Если вы находитесь в ситуации, когда кто-то загружает страницу A, затем страницу B, затем снова страница A, это может вызвать конфликты. Но очень хорошая идея, если все сделано правильно! – SimonDever
@Ambrosia +1, хорошая точка. Но обратите внимание, что мой первый подход такой же, как ваш (добавление тега 'script' в конце каждого html), а второй учитывает, что страница перезагрузится, но если URL-адрес изменится (без полной перезагрузки) да, может быть большой проблемой ... – NemoStein
Ах да, вы собираетесь сделать всю перезагрузку, чтобы запустить это. Полагаю, что это позволит избежать конфликта. Также следует отметить, что вам нужно подождать, пока DOM полностью завершит загрузку, прежде чем вы сможете вносить изменения в содержимое в тег '
', чтобы вы могли поместить его в '$ (document) .ready (function () {}); 'block. Если вы удалите скрипт, изменив src (после загрузки DOM), он удалит функции из памяти браузера или может быть конфликт? Я могу попробовать написать еще один динамический сменщик сценариев, чтобы проверить это. – SimonDever