Javascript 如何加载包含脚本的外部html文件_Javascript_Jquery_Html

Javascript 如何加载包含脚本的外部html文件

javascript jquery html

Javascript 如何加载包含脚本的外部html文件,javascript,jquery,html,Javascript,Jquery,Html,不幸的是，我不确定对java、jquery和所有这类东西有什么了解。尽管如此，我还是试图在论坛上获得一些灵感，以便制作一个包含垂直导航栏和div容器的个人网站，外部html页面将在其中加载。每个html文件都使用一个名为html5的小程序，该程序绘制可以交互操作的3D分子。主页面如下所示： <!DOCTYPE html> <html> <head> <title> 3D Chemistry </title> <link rel="

不幸的是，我不确定对java、jquery和所有这类东西有什么了解。尽管如此，我还是试图在论坛上获得一些灵感，以便制作一个包含垂直导航栏和div容器的个人网站，外部html页面将在其中加载。每个html文件都使用一个名为html5的小程序，该程序绘制可以交互操作的3D分子。主页面如下所示：

<!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文件点组条目，它在单独加载时工作得非常好。但当它作为外部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>

我曾试图通过查看以前的帖子来找到这个问题的答案，但我拙劣的技能使我无法找到针对这个问题的相关建议

感谢您的帮助。

//从URL创建DOM对象

$html = file_get_html('http://www.google.com/');

//从HTML文件创建DOM对象

$html = file_get_html('test.htm');

您想异步还是同步加载这些外部页面？Java！=JavaScript！！！！！！！！！！！也许是我的问题的答案，包含在同步与异步的问题中。说实话，我现在不确定答案。直觉上，我会说是异步的。谢谢DrCord提供的这条非常有用的评论。事实是：在我看来，添加一些php是解决他的问题的最简单的方法……php？好吧，除非是名字，这对我来说是新的。请你说得再清楚一点好吗？我应该把这些代码放在哪里？在标题中？以及如何与content div部分建立链接？