Javascript 如何导入html并插入到div中？_Javascript_Jquery_Html_Polymer

Javascript 如何导入html并插入到div中？

javascript jquery html polymer

Javascript 如何导入html并插入到div中？,javascript,jquery,html,polymer,Javascript,Jquery,Html,Polymer,我想在html文件的另一个div中插入一个html文件。我不精通javascript，我有这个想法 <head> <link rel="import" href="polymer/polymer.html" /> <link rel="import" id="note-import-01" href="some.html" /> </head> <body> <div id="notes"> <

我想在html文件的另一个div中插入一个html文件。我不精通javascript，我有这个想法

<head>
    <link rel="import" href="polymer/polymer.html" />
    <link rel="import" id="note-import-01" href="some.html" />
</head>
<body>
<div id="notes">
    <div id="blocker"></div>
    <script type="text/javascript">
        var link = document.querySelector('#note-import-01');
        var content = link.importNode;
        parent.insertBefore(content);
    </script>
</div>
</body>

然而，它似乎不是我想要的。例如，id为blocker的div不包含页面内容。对不起，这里我指的是第3行的some.html

注意

我已经包括聚合物，但聚合物的文件路径取决于您我知道我必须上传服务器上的父页面和组件页面，但我已经上传了十几次了，所以我需要一些帮助。

将jQuery添加到页面中，然后将其与适当的URL一起使用以代替示例

<script type="text/javascript">
   jQuery(document).ready(function(){
       jQuery("#blocker").load("yourURLHere");
   });
</script>

您可以使用jquery的load

或者使用纯javascript

var xhr= new XMLHttpRequest();
xhr.open('GET', 'polymer/polymer.html', true);
xhr.onreadystatechange= function() {
    if (this.readyState==4 && this.status==200)                
        document.getElementById('blocker').innerHTML= this.responseText;
};
xhr.send();

您可以尝试使用jQuery.load方法将html文件some.html加载到当前页面

下面的解决方案有一个锚定标记a，它有一个click事件处理程序，在该处理程序中加载了本地html页面some.html

JS代码：

HTML代码：

现场演示@JSFiddle:

注意：上面的JSFIDLE不允许加载远程资源，但在您的情况下，本地资源将被完美加载

您可以使用HTMLImports这样做：

<pre id="notes"></pre>

<script>
  function importLoaded(link, slctr) {
    document.querySelector(slctr).appendChild(link.import.body);
  }
</script>

<link href="polymer/bower.json" rel="import" onload="importLoaded(this, '#notes')">

对不起，我不是说聚合物。它已经成功加载到我的页面。是的，我以为你正在加载polymer.html。。你可以加载任何文件，只要它来自同一台服务器。奇怪的是，我最后循环加载父页面。我没有要求点击页面，因为我认为读者不喜欢点击太多。抱歉，我没看到。现在它将自动加载。您的解决方案有效，但我做了一点更改以避免出现错误。如果您不介意的话，可以查看psssix.shyjohn.net/tp/matter-model-ideal-gas.htmlyeah，因为解决方案是展示通用修复程序，所以您可以根据需要进行修改。我还看到一些css问题，页面末尾的表格周围有白色背景，你也需要解决这个问题。你是否试图使用Polymer插入另一个html文件？还是jQuery？如果是Polymer，您需要创建一个元素，或者使用自动绑定模板。@anthony这是一个html文件，我知道这是一个html文件。但是，我想知道你们是想用聚合物还是jQuery。

$(document).ready(function(){
      $('#aUrl').hide();
      $('#divPage').load(this.href); 
 });

<div id="divPage"></div>
  <a href="http://lesson8.blogspot.in/2012/06/bind-gridview-using-jquery.html" id="aUrl">Load Page</a>

<pre id="notes"></pre>

<script>
  function importLoaded(link, slctr) {
    document.querySelector(slctr).appendChild(link.import.body);
  }
</script>

<link href="polymer/bower.json" rel="import" onload="importLoaded(this, '#notes')">