К сожалению, я не уверен, что что-то понимаю в java, jquery и всех подобных вещах. Тем не менее, я пытаюсь получить вдохновение на форумах, чтобы создать персональный веб-сайт, содержащий вертикальную навигационную панель и контейнер div, в которые будут загружены внешние html-страницы. Каждый html-файл использует апплет html5 под названием JSmol, который отображает 3D-молекулы, которые можно манипулировать интерактивно. Главная страница выглядит следующим образом:Как загрузить внешний файл html, содержащий скрипты
<!DOCTYPE html>
<html>
<head>
<title> 3D Chemistry </title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="Chem3D-CSS/MolChem.css" />
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<!-- META TAGS start -->
<meta name="Title" content="Molecular Chemistry" />
<meta charset="UTF-8">
<!-- META TAGS end -->
<script type="text/javascript">
$(document).ready(function() {
// select all the links with class="lnk", when one of them is clicked, get its "href" value
// load the content from that URL and check the "status" of the request
// place the response or an error message into the tag with id="content"
$('a.lnk').click(function() {
var url = $(this).attr('href');
$('#content').load(url, function(response, status, xhr) {
// check the status, if "success", place the response into #content
// else, if "error", define an error message and insert it into #content
// else, display an Alert with the status
if(status=='success') {
$('#content').html(response);
}
else if(status=='error') {
var ermsg = '<i>There was an error: '+ xhr.status+ ' '+ xhr.statusText+ '</i>';
$('#content').html(ermsg);
}
else { alert(status); }
});
return false;
})
});
</script>
</head>
<body class="s_page" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div id="header"> <a id="UPS-link" href="http://www.univ-tlse3.fr/" title="Paul Sabatier University - Toulouse III">
<img src="Chem3D-IMAGES/UT3_PRES_logoQ.png" alt="Paul Sabatier University" id="logoUPS" width=300px />
</a>
</div>
<div id="vmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">3D Molecules</a>
<ul>
<li><a href="Mol1.html" class="lnk">Mol1</a></li>
<li><a href="#">Mol2</a></li>
</ul>
</li>
<li><a href="#">Symmetry</a>
<ul>
<li><a href="#">Symmetry Elements</a>
<ul>
<li><a href="#">C<sub>2</sub>H<sub>6</sub></a></li>
<li><a href="#">Ru<sub>4</sub>H<sub>4</sub>(CO)<sub>12</sub></a></li>
</ul>
</li>
<li><a href="PG.html" class="lnk">Point Groups</a>
</li>
</ul>
</li>
<li><a href="#">Solids</a>
<ul>
<li><a href="#">fcc</a></li>
<li><a href="#">hcp</a></li>
</ul>
</li>
</ul>
</div>
<div id="content">
</div>
<div class="s_author" id="footer">
author: romuald.poteau_at_univ-tlse3.fr
<br/>last modification: 2013/12/16
</div>
</body>
</html>
До сих пор, я работал над файлом PG.html (Group Точка входа в вертикальном меню), который работает прекрасно, когда он будет загружен отдельно. Но это не тот случай, когда он загружается внутри главной страницы как внешняя страница html. Заголовок - это единственное, что появляется, кажется, что приложение jsmol неправильно инициализировано. Может быть, это специфично для вызова jsmol; или это общая проблема, когда вы хотите загрузить hmtl-файлы со встроенными скриптами?
<!DOCTYPE html>
<html>
<head>
<title> POINT GROUPS </title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="Chem3D-CSS/MolChem.css" />
<!-- META TAGS start -->
<meta name="Title" content="Molecular Chemistry" />
<meta name="Format" content="text/html" />
<meta name="Language" content="en" />
<meta charset="UTF-8">
<!-- META TAGS end -->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="./JSmol.min.js"></script>
<script type="text/javascript">
// ---------------------------------------------------------------------------------
////// every page will need one variable and one Info object for each applet object
var Info = {
width: 500,
height: 500,
color: "0xC0C0C0",
use: "HTML5",
jarPath: "java",
j2sPath: "j2s",
jarFile: "JmolApplet.jar",
isSigned: false,
addSelectionOptions: false,
serverURL: "php/jsmol.php",
readyFunction: jmol_isReady,
console: "jmol_infodiv",
disableInitialConsole: true,
debug: false,
}
</script>
</head>
<body class="s_page" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div class="s_title" id="titlePG">
Point Groups
</div>
<div class="s_normal" id="mainPG">
<table border="0">
<tbody>
<tr valign="top">
<td nowrap="nowrap">
<script type="text/javascript">
Jmol.getApplet("Jmol1", Info);
Jmol.script(Jmol1,'load Chem3D-data/nh2cl.xyz;');
Jmol.resizeApplet(Jmol1, 500);
</script>
<br>
</td>
<td>
<script>
Jmol.setButtonCss(null,"style='width:300px'")
Jmol.jmolButton(Jmol1,"load Chem3D-data/nh2cl.xyz;", "NH2Cl (Cs)");
Jmol.jmolBr();
Jmol.jmolButton(Jmol1,"load Chem3D-data/cis-dichloroethylene.xyz;", "cis-dichloroethylene (C2v)");
Jmol.jmolBr();
Jmol.jmolButton(Jmol1,"load Chem3D-data/trans-dichloroethylene.xyz;", "trans-dichloroethylene (C2h)");
</script>
<br>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Я попытался найти ответ на этот вопрос, проверяя предыдущие посты, но мои бедные навыки не позволяют мне определить соответствующие предложения по данному вопросу.
Спасибо за любую помощь.
ли Вы хотите загрузить эти внешние страницы асинхронно или синхронно? – Enijar
Java! = JavaScript. !!!!!!!!!!! – DrCord
Возможно, это ответ на мою проблему, содержащуюся в синхронном и асинхронном вопросе. Честно говоря, я не уверен, что теперь ответ. Интуитивно, я бы сказал, асинхронный. – user2997973