Question

我有这个简单的HTML：

  <head>
      <h1>Prueba</h1>
  </head>

  <body>

      <form method="POST" action="">
            Introduce KeyWord <input type="text" name="key">
            <input type="submit" name="submit" value="Submit">
      </form>

  </body>

现在，我想要包含附加了severak .js的其他html。我已经看到了不同的方式，但我只得到包含文件html，没有附加.js。

有任何帮助吗？非常感谢你！

编辑：这是我想要包含在内的其他html，附带了js：

<html>
 <head>
  <meta charset="UTF-8">
  <title>Word Cloud</title>
  <script src="d3.js" charset="utf-8"></script>
  <script src="d3.layout.cloud.js"></script>
  <script src="d3.wordcloud.js"></script>
  <script src="example.words.js"></script>
  </head>
  <body style="text-align: center">
  <h1>Word Cloud</h1>
  <div id='wordcloud'></div>

  </body>
</html>

Answer 1

演示链接：https://plnkr.co/edit/kByh82pSAw6sQAOFp5gO?p=preview

你可以使用这个javascript函数包含html文件：

javascript：和html代码：

＆＃13;

    function includeHTML() {
      var z, i, elmnt, file, xhttp;
      /*loop through a collection of all HTML elements:*/
      z = document.getElementsByTagName("*");
      for (i = 0; i < z.length; i++) {
        elmnt = z[i];
        /*search for elements with a certain atrribute:*/
        file = elmnt.getAttribute("w3-include-html");
        if (file) {
          /*make an HTTP request using the attribute value as the file name:*/
          xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4) {
              if (this.status == 200) {elmnt.innerHTML = this.responseText;}
              if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
              /*remove the attribute, and call this function once more:*/
              elmnt.removeAttribute("w3-include-html");
              includeHTML();
            }
          }      
          xhttp.open("GET", file, true);
          xhttp.send();
          /*exit the function:*/
          return;
        }
      }
    };
    includeHTML();

＆＃13;

 <!DOCTYPE html>
 <html>
    <body>
      <div w3-include-html="<**html-name-file**>"></div> 
    </body>
 </html>

＆＃13;

我找到了这段代码there

Answer 2

您可以使用iframe将其他网站嵌入您的网站：

<iframe src="other.html" height="200" width="300"></iframe>

在这种情况下，other.html包含指向网站中其他页面的链接以及指向js文件的链接。

Answer 3

演示链接：https://plnkr.co/edit/kByh82pSAw6sQAOFp5gO?p=preview 这个工作绝对正常。

请记住，如果您要在PC上进行测试，则无法直接使用。您将在控制台Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.中收到错误消息。

所以，在服务器上测试我的意思是localhost

快乐编码

<!DOCTYPE html>
<html>
   <script>
      function includeHTML() {
        var z, i, elmnt, file, xhttp;
        /*loop through a collection of all HTML elements:*/
        z = document.getElementsByTagName("*");
        for (i = 0; i < z.length; i++) {
          elmnt = z[i];
          /*search for elements with a certain atrribute:*/
          file = elmnt.getAttribute("data-include");
          if (file) {
            /*make an HTTP request using the attribute value as the file name:*/
            xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
              if (this.readyState == 4) {
                if (this.status == 200) {
                    // Get the DOMPareser to parse String into HTML
                    var  parser = new DOMParser();
                    var  doc = parser.parseFromString(this.responseText, "text/html");;
                    elmnt.innerHTML = this.response ;
                    var allscripts = doc.getElementsByTagName('script');              
                    // Run all the Javascript
                    for(var k = 0; k<allscripts.length;k++){
                      var x = allscripts[k].innerHTML;
                      eval(x);
                    }
                  }
                if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
                /*remove the attribute, and call this function once more:*/
                elmnt.removeAttribute("data-include");
                includeHTML();
              }
            }      
            xhttp.open("GET", file, true);
            xhttp.send();
            /*exit the function:*/
            return;
          }
        }
      };
   </script>
   <body>
      <div data-include="text.html"></div>
      <script>
         includeHTML();
      </script>
   </body>
</html>

在附加.js的其他html中包含html

3 个答案: