Load html contents of a given url and place exactly there (like document.write()) in JavaScript

问题

I want to write a JavaScript code that load HTML contents of a given URL and place the loaded HTML code exactly where the script is placed. (maybe this looks like functionality of the iframe tag, but i dont want "iframe tag" become a medium. i just want to load the html code and place it there without adding any container or extra parent) something like this:

var url = "http://example.com/";    
var html = loadhtmlcontents(url); // something like simplexml_load_file($url) for php and xml
document.write(html); // somthing like saveHTML() in DOMDocument class of php

I've tried AJAX approach but it doesn't work:

    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.wirte( xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", Url, false );
    xmlhttp.send();

could you please give me an equivalent or correction to these? (pure JS approach is preferred to JQuery for me in this situation)

回答1:

Getting the current script tag is possible, but here's another approach (keep in mind it replaces the entire element with the id tag):

In the body tag:

<script id='test'>docWrite('test', '/echo/html')</script>

Javascript declaring a new function:

function docWrite(id, url) {
    var xmlhttp = new XMLHttpRequest(),
        _id = id;

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState == 4 
             && xmlhttp.status == 200) {
            var el = document.getElementById(_id),
                textnode = el.firstChild,
                div = document.createElement('div');

            div.id = _id;
            div.appendChild(textnode);

            el.parentNode.insertBefore(div, el.nextSibling);
            el.parentNode.removeChild(el);

            console.log(xmlhttp.responseText);
        }
    }

    xmlhttp.open("GET", url, false );
    xmlhttp.send();
}

http://jsfiddle.net/dpgk1Lx2/

Here, all I'm doing is copying the contents of the id-related tag (there is no responseText to display). In your usage, you would do this instead:

function docWrite(id, url) {       
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState == 4 
             && xmlhttp.status == 200) {
            var el = document.getElementById(_id)
                div = document.createElement('div');

            div.id = _id;
            div.appendChild(xmlhttp.responseText);

            el.parentNode.insertBefore(div, el.nextSibling);
            el.parentNode.removeChild(el);
        }
    }

    xmlhttp.open("GET", url, false );
    xmlhttp.send();
}

回答2:

I know you are looking for a jQuery-less version... but I'm going to post this first... just to indicate how simple it is (and it works around browser differences in making AJAX calls, handling callbacks etc. for you).

<div id="someID"></div>
<script>$('#someID').load('someurl.html');</script>

来源：https://stackoverflow.com/questions/25340450/load-html-contents-of-a-given-url-and-place-exactly-there-like-document-write

标签

javascript

html

ajax

iframe

document.write