Question

不幸的是，我不确定对java，jquery和所有这些事情都有所了解。尽管如此，我试图在论坛上获得一些灵感，以便创建一个包含垂直导航栏和div容器的个人网站，其中将加载外部html页面。每个html文件都使用一个名为JSmol的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文件（垂直菜单中的 Point 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>

我试图通过查看以前的帖子找到这个问题的答案，但是我的技能不高，不允许我为这个问题找出相关的建议。

感谢您的帮助。

Answer 1

//从URL创建DOM对象

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

//从HTML文件创建DOM对象

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

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

1 个答案: