Javascript：如何注入外部html文件？ （在同一领域）

Question

我正在尝试使用javascript将外部html文件注入当前DOM。这是在同一个域上，因此单一来源政策不是问题。

var body = document.getElementsByTagName('body')[0];
var script= document.createElement('p');
script.innerHTML = 'http://samedomain.com/my.html';
body.appendChild(script);

任何想法？

Answer 1

如果它位于同一个域中，您可以使用XmlHttpRequest（在不同浏览器中的工作方式不同），或者只是将一个不可见的iframe附加到具有src属性的文档中，该属性具有您的页面值想要加载，然后获取iframe文档的body的父元素node对象的innerHTML属性（非标准但广泛支持）。

^{如果它位于远程域上，最简单的方法是让服务器获取页面，然后使用上述方法之一，因为浏览器可以防止跨域脚本编写。}

以下是隐藏iframe方法的快速示例;它应该是最容易适用于所有浏览器的：

  (function(){

    // our callback: do this when the remote document loads.
    function callback() {
      var b = frames['my_hidden_frame'].document.body;
      var response = (b.parentElement||b.parentNode).innerHTML;
      // do whatever you need to do here
      alert(response);
    }


    // create an iframe
    var e = document.createElement('iframe');

    // your ajax content
    e.src = '/some/local/path';

    // give the frame an id
    e.id = 'my_hidden_frame';

    // make the iframe invisible, but don't just display:none, 
    // because some browser (forgot which, old safari?) screws it up
    e.style.height='0px';
    e.style.width='0px';
    e.style.position='absolute';
    e.style.left='-100px';

    e.onload=callback;

    // put it in the body, it will load.
    document.body.appendChild(e);

  }());

Answer 2

对于远程域，您可以像使用Gist一样使用JSOP。

例如：见http://gist.github.com/5710.js

对于本地，您可以使用ajax调用来拉取html，然后是结果的document.write。

请记住，如果它是一个直接的html页面，你可能想要在注入页面之前去除head和html标签。