加载给定url的html内容，并在JavaScript中精确地放置在那里(如document.write())

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

本文关键字：在那里 document write url html 内容 JavaScript 并在 加载      更新时间：2023-09-26

我想编写一个JavaScript代码来加载给定URL的HTML内容，并将加载的HTML代码精确地放置在脚本放置的位置。(也许这看起来像iframe标签的功能，但我不希望"iframe标签"成为一个媒介。我只想加载HTML代码并将其放置在那里不添加任何容器或额外的父元素)像这样:

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

我已经尝试过AJAX的方法，但它不工作:

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

你能给我一个相等的或更正这些吗?(在这种情况下，我更喜欢纯JS方法，而不是JQuery)

获取当前的script标签是可能的，但这里有另一种方法(记住它用id标签替换了整个元素):

body标签:

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

Javascript声明一个新函数:

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/

这里，我所做的就是复制id相关标签的内容(没有responseText要显示)。在您的用法中，您可以这样做:

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

我知道你正在寻找一个jQuery-less版本…但我要先把这个贴出来…只是为了表明它是多么的简单(并且它在为您进行AJAX调用，处理回调等方面绕过浏览器差异)。

<div id="someID"></div>
<script>$('#someID').load('someurl.html');</script>
相关文章：