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

Question

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)

I would append a div directly in your script... then call the AJAX and append the returned contents to the div. — scunliffe, Aug 16 '14 at 13:09
so a div parent is added. is there any better solution that exactly do the same as document.write() ? or any correction to my code plz? — faza, Aug 16 '14 at 13:11
yeah, fix the .wirte() spelling error, browser js consoles are your friends! — Brunis, Aug 17 '14 at 12:04

score 1 · Answer 1 · edited May 23 '17 at 11:43

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();
}

If you can do your own fiddle with what you've got, I can take a look. — Jared Farrish, Aug 16 '14 at 13:40
i replaced my url with your URL in fiddle but it doesn't work. — faza, Aug 16 '14 at 13:51
You should be using the second function I show, first of all (see [here](http://jsfiddle.net/dpgk1Lx2/1/)). Second, you're probably getting cross-domain errors using your own url in the jsfiddle; this is why I used the jsfiddle-located `/echo/html` in the example. Make sure you have the right `id` on the attribute of the element you're targeting and in the `docWrite()` call, and watch the Javascript console and network log for errors. — Jared Farrish, Aug 16 '14 at 13:56
ow! it seems AJAX can't send and recieve data from another server. right? if it is, AJAX approach fails for me. — faza, Aug 16 '14 at 18:52

score 0 · Answer 2 · answered Aug 16 '14 at 13:23

0

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>

answered Aug 16 '14 at 13:23

scunliffe

62,582
25
126
161

TNX a lot. It's really simple and short. but I can't guarantee that clients that will copy and paste my code, use JQUERY and include it's library. can i explain my problem ? – faza Aug 16 '14 at 18:54
Ah, so you are trying to provide a script tag snippet that other developers can copy/paste into their code where they want your "widget" to appear? is that the idea? – scunliffe Aug 16 '14 at 20:59

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

2 Answers2

Linked