Question

我想将html文件插入到html文件中的另一个div中。我不熟悉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阻止程序的div不包含页面内容。 抱歉，我在这里指的是第3行的some.html。

请注意

我已经加入了聚合物，但聚合物的文件路径取决于你
我知道我必须在服务器上上传父页面和组件页面，但我已经完成了十几次这样做，所以我需要一些帮助。

Answer 1

将jQuery添加到页面，然后使用正确的URL代替示例。

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

Answer 2

您可以使用jquery的load

$("#blocker").load("polymer/polymer.html");

或使用普通的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();

Answer 3

You can try loading your html file some.html into your current page used the jQuery .load() method.

The below solution has a anchor tag a which has a click event handler and inside the handler the local html page some.html is loaded.

JS Code:

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

HTML Code:

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

Live Demo @ JSFiddle: http://jsfiddle.net/dreamweiver/dVPQw/740/

Note: The above jsfiddle is not allowing to load the remote resource, but in your case the local resource will be loaded perfectly

Answer 4

您可以使用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')">

如何导入html并插入div？

4 个答案: