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

Question

我想注入一個外部html文件到當前使用javascript的DOM。這是在同一個域中，所以單一來源策略不是問題。

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

有什麼想法嗎？

Answer 1

對於遠程域，您可以像使用Gist一樣使用JSOP。

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

對於本地可以使用Ajax調用拉HTML，然後結果的文件撰寫。請注意，如果它是一個連續的html頁面，則可能需要在注入頁面之前去掉頭部和html標記。

Answer 2

如果是在同一個域，你可以使用XmlHttpRequest（在不同的瀏覽器的工作方式不同），或者只是一個無形的iframe附加到文件具有要加載頁面的價值src屬性，然後得到iframe的文檔的主體的父元素節點對象的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); 

    }());