Динамично загружающийся внешний HTML в отделении, использующем Сценарий Java
Я подготовил некоторые демонстрационные примеры к теме. Существует название страницы "changelog.html" здесь:
http://pantheon-studios.in/test/jquery/changelog.html
Это хорошо работает, если загружено непосредственно.
Я пытаюсь загрузить эту страницу динамично в:
http://pantheon-studios.in/test/jquery/index.html
Здесь changelog.html не делает поведения как ожидалось.
Я думаю, что init сценарий на changelog.html не становится выполняемым, или что-то еще происходит при загрузке его динамично.
Как мудрый у меня действительно есть несколько других страниц с помощью различного jQuery и других плагинов сценариев Java. Некоторые из тех потребностей инициализация как animatedcollapse.js в вышеупомянутом примере, и нескольким их не нужна инициализация, можно непосредственно назвать сценарий и пойти.
Я также дал использование попытки:
jQuery.getScript("anim.js")
после динамичной загрузки "changelog.html", но не работает.
"anim.js" содержит
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets,hide=1');
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,hide=1');
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1');
animatedcollapse.init();
Я был бы очень признателен за, кто-то, указывают на меня правильное направление. Я абсолютно плохо знаком с веб-программированием, поэтому имейте некоторое терпение ко мне.
Спасибо
2 ответа
Я решил вашу проблему
Ваш index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Java Scripts -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
$("#clickme").click(function() {
$("#content").load("changelog.html");
});
});
</script>
</head>
<body>
<a href="javascript:void(0)" id="clickme">Load HTML</a>
<div>
<div id="content"></div>
</div>
</body>
</html>
Ваш changelog.html
<script type="text/javascript" src="js/animatedcollapse.js"></script>
<script type="text/javascript">
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets,hide=1');
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,hide=1');
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1');
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
};
animatedcollapse.init();
</script>
<!-- CSS Stylesheet -->
<style type="text/css">
.topicdetail{
text-align:justify;
width:650px;
padding-left:10px;
padding-right:10px;
/*background: #BDF381;*/
font-size: 13px;
}
</style>
<div id="container">
<ul>
<li>Compilation command in preferences is more simplified.<a href="javascript:animatedcollapse.toggle('cat')">?</a>
<div id="cat" class='topicdetail'>
<br/>
<p>
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines,
is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship
and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.
A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple
commands.
</p>
<br/>
</div>
</li>
<li>Compilation command in preferences is more simplified.<a href="javascript:animatedcollapse.toggle('dog')">?</a>
<div id="dog" class='topicdetail'>
<br/>
<p>
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines,
is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship
and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.
A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple
commands.
</p>
<br/>
</div>
</li>
<li>Compilation command in preferences is more simplified.<a href="javascript:animatedcollapse.toggle('rabbit')">?
</a>
<div id="rabbit" class='topicdetail'>
<br/>
<p>
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines,
is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship
and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.
A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple
commands.
</p>
<br/>
</div>
</li>
</ul>
</div>
Просто скопируйте и вставьте html
Попробуйте обработчик события onLoad в теге body в журнале изменений и посмотрите, поможет ли это решить проблему. IE
function init() {
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets,hide=1');
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,hide=1');
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1');
animatedcollapse.init();
}
<body onload="init()">.... etc
или добавьте init () в:
onclick="jQuery('#content').load('changelog.html #container');init();return false"