Question

我的意思是从 b.html 导入文本以存储在 div id =＆＃34;内容＆＃34; 中，因此Javascripts应该像这样工作{ {1}}

原始代码：

document.getElementById('content').innerHTML = "whole Text/HTML from b.html";

这个简单的问题似乎是重复的，但我不知道为什么我复制的代码不起作用。我在控制台中收到了错误，但不知道我的代码是否正确。我还需要更多解释它们。＆＃34; XMLHttpRequest无法加载file：/// C：/xampp/htdocs/makemeapp/b.html。交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https，chrome-extension-resource。＆＃34;

其他相关问题是，如何使用data-uid =＆＃34; 1＆＃34;？链接到该div？（请参阅原始代码）例如，如果我想更改通过链接到id =＆＃34;内容＆＃34; ，我使用<html> <head> <script src="js/jquery-1.11.3.min.js"></script> <script> $(function(){ $("#content").load("b.html"); }); </script> </head> <body> <div id="content" data-uid="1"></div> </body> </html>，那么如何通过链接到data-uid来改变文本？

我非常感谢所有的回复。对不起英语和非常新手。我尽力去搜索它们。

Answer 1

尝试使用此代码

<script>
$(document).ready(function(){
  $.get('b.html', function(data) {
      $("#content").html(data);
  });
})
</script>

Answer 2

阅读child.htm和parent.htm

的内容

注意：这适用于：

两个页面都位于同一个域
两者都在线（即网站或本地服务器）

child.htm

<style>
  * {color:red;}
</style>
<h1>child.html</h1>
<p>This is the HTML that needs to be imported to target page</p>
<p>The optimal structure of this page has no  &lt;html&gt; and no  &lt;head&gt;
</p>
<div></div>
<script>
  var x = document.querySelector('div');
  x.innerHTML = "This is generated dynamically"
</script>

parent.htm

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>parent.htm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>

<body>
  <p>This is the target page.</p>
  <p>For every piece of external HTML you want imported, place an empty div an this page with the attribute data-xmh="nameOfPage.html"</p>
  <div data-xmh="child.htm"></div>

  <script>
    function xmHTMLInclude() {
      var ele, i, tgt, file, xmHttp;
      ele = document.getElementsByTagName("*");
      for (i = 0; i < ele.length; i++) {
        if (ele[i].getAttribute("data-xmh")) {
          tgt = ele[i].cloneNode(false);
          file = ele[i].getAttribute("data-xmh");
          xmHttp = new XMLHttpRequest();
          xmHttp.onreadystatechange = function() {
            if (xmHttp.readyState == 4 && xmHttp.status == 200) {
              tgt.removeAttribute("data-xmh");
              tgt.innerHTML = xmHttp.responseText;
              ele[i].parentNode.replaceChild(tgt, ele[i]);
              xmHTMLInclude();
            }
          }
          xmHttp.open("GET", file, true);
          xmHttp.send();
          return;
        }
      }
    };

    /*~~~~ Usage

    (function () {
    	xmHTMLInclude();
    });

    Target element must have a data-xmh attribute
    <div data-xmh="frag.htm"></div>
    */
  </script>
</body>

</html>

Answer 3

查看错误消息。

XMLHttpRequest cannot load file:///C:/xampp/htdocs/makemeapp/testlayout2.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

您正在使用file:///协议运行它。您必须启动本地Web服务器，然后才能发出请求。

如果安装了Python，则可以在C:/xampp/htdocs/makemeapp/中运行此命令以启动简单的Web服务器。

python -m SimpleHTTPServer

然后浏览到http://localhost:8080/testlayout2.html，您的脚本就可以运行。

如何从其他html导入代码

3 个答案: