加载给定 url 的 html 内容并在 JavaScript 中准确放置（如 document.write()）

Posted 2023-03-05

【中文标题】加载给定 url 的 html 内容并在 JavaScript 中准确放置（如 document.write()）

【英文标题】：Load html contents of a given url and place exactly there (like document.write()) in JavaScript

【发布时间】：2014-10-10 00:25:03

【问题描述】：

我想编写一个 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 更适合我）

【问题讨论】：

我会直接在你的脚本中附加一个 div...然后调用 AJAX 并将返回的内容附加到 div 中。

所以添加了一个 div 父级。有没有更好的解决方案与 document.write() 完全相同？或者对我的代码进行任何更正？

是的，修复 .wirte() 拼写错误，浏览器 js 控制台是你的朋友！

【参考方案1】：

获取current script tag 是可能的，但这是另一种方法（请记住，它将整个元素替换为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();

【讨论】：

这就是我正在做的。你看到小提琴了吗？

如果你能自己动手，我可以看看。

我用你的网址替换了我的网址，但它不起作用。

你应该首先使用我展示的第二个函数（参见here）。其次，您可能会在 jsfiddle 中使用自己的 url 得到跨域错误；这就是我在示例中使用位于 jsfiddle 的 /echo/html 的原因。确保您在目标元素的属性和 docWrite() 调用中拥有正确的 id，并查看 Javascript 控制台和网络日志中的错误。

哇！似乎 AJAX 无法从另一台服务器发送和接收数据。正确的？如果是，AJAX 方法对我来说失败了。

【参考方案2】：

我知道您正在寻找一个没有 jQuery 的版本...但我将首先发布这个...只是为了说明它是多么简单（它可以解决浏览器在进行 AJAX 调用、处理回调方面的差异等等）。

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

【讨论】：

TNX 很多。它真的很简单而且很简短。但我不能保证将复制和粘贴我的代码的客户端使用 JQUERY 并包含它的库。我能解释一下我的问题吗？

啊，所以您正在尝试提供一个脚本标签 sn-p，其他开发人员可以将其复制/粘贴到他们希望您的“小部件”出现的代码中？是这个主意吗？