HTML 文件的 Javascript 代码在外部 HTML 文件上调用 jQuery

Question

I have an HTML file which runs a javascript code doing, among other things, also some jQuery calls.我有一个 HTML 文件，它运行 javascript 代码，除其他外，还有一些 jQuery 调用。 I would like to separate a portion of my HTML code in an external file because I would like to use it as a common file among several HTML files and I would like the javascript code to be able to do the jQuery calls also to the external file. I would like to separate a portion of my HTML code in an external file because I would like to use it as a common file among several HTML files and I would like the javascript code to be able to do the jQuery calls also to the external file . Any suggestion on this?对此有何建议？ I am quite new to javascript, thus any kind of suggestion on how to proceed would be very helpful.我对 javascript 很陌生，因此任何关于如何进行的建议都会非常有帮助。

Here is an example showing my problem.这是一个显示我的问题的示例。 Note that in the HTML code I indicated the portion I would like to separate.请注意，在 HTML 代码中，我指出了我想要分离的部分。

HTML HTML

<html>
  <head>
    <title>MWE</title>
    <script
      src="https://code.jquery.com/jquery-3.3.1.js"
      integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
      crossorigin="anonymous">
    </script>
    <script src="js/init.js">
    </script>
  </head>
  <body>
    <h1><a class="mobileUI-site-name">My website</a></h1>
    <!-- PORTION TO EXTRACT: begin
    <nav id="nav" class="mobileUI-site-nav">
      <ul>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a>
            <ul>
              <li><a href="#">A</a></li>
              <li><a href="#">B</a></li>
            </ul>
          </li>
      </ul>
    </nav>
    PORTION TO EXTRACT: end -->
    <div> Some text here </div>
  </body>
</html>

Javascript (just the portion of interest) Javascript （只是感兴趣的部分）

var x = jQuery('.mobileUI-site-name'), site_name = (x.length > 0 ? x.html() : ''),
    site_nav_options = new Array();

jQuery('.mobileUI-site-nav a').each(function() {
    var t = jQuery(this), indent;
    indent = Math.max(0,t.parents('li').length - 1);
    site_nav_options.push(
    '<div class="mobileUI-site-nav-link><span class="indent-' + indent + '"></span>' + t.text() + '</div>'
    );
});

For the HTML code I should simply include in the head对于 HTML 代码，我应该简单地包含在头部

<script>
   $(function(){
      $("#top-menu").load("./common/menu.html");
   });
</script>

and the proper <div id="top-menu"></div> in the body.以及正文中正确的<div id="top-menu"></div> 。 How should I change the javascript code?我应该如何更改 javascript 代码？

Answer 1

This answer may be helpful: Include another HTML file in a HTML file .这个答案可能会有所帮助：在 HTML 文件中包含另一个 HTML 文件。 It explains how to import HTML into existing HTML using JQuery.它解释了如何使用 JQuery 将 HTML 导入现有的 HTML。 Specifically具体来说

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

where the content you want to extract would need to be put into "b.html".您要提取的内容需要放入“b.html”中。 To access the added HTML you would need to use a callback, as described here: https://api.jquery.com/load/要访问添加的 HTML，您需要使用回调，如下所述： https://api.jquery.com/load/

$("#includedContent").load("b.html", function() {
  alert( "Load was performed." );
});

Ie replace the alert command with whatever you want to do with JQuery that affects the loaded HTML.即用影响加载的 HTML 的 JQuery 替换警报命令。

HTML 文件的 Javascript 代码在外部 HTML 文件上调用 jQuery

问题描述

1 个解决方案

解决方案1
0 2020-05-06 08:40:17

HTML 文件的 Javascript 代码在外部 HTML 文件上调用 jQuery

问题描述

1 个解决方案

解决方案1 0 2020-05-06 08:40:17

解决方案1
0 2020-05-06 08:40:17