<div> 单击按钮修改容器，从GET请求插入HTML

Question

先决条件

我有一个网站，它显示一个带有输入和按钮的页面。另一端是一个服务器，它公开了一个非常基本的HTTP API。API的名称如下：

http://127.0.0.1/api/arg1/arg2/arg3

其中argX是参数。它返回原始HTML。此HTML代码需要插入到网站（另一个域）中。有一个

<div id="container5"></div>

在网站上。HTML需要插入到这个容器中。API返回的代码是专门插入到这个容器中的，因为它使用来自网站的CSS类和脚本，即：代码本身无效。

目标

以下是我所拥有的：我有API来返回我想要的，我有一个小JavaScript来在网站上运行以更改容器的内容：

var element = document.getElementById("container5");
element.innerHTML = "New Contents";

到目前为止，这是有效的。现在我需要一种将HTML从API获取到页面的方法。通过阅读大量SO问题，很快就清楚了，由于安全限制，在JavaScript中从另一个URL读取HTML几乎是不可能的。

有没有一种简单的方法可以用JavaScript做到这一点，或者我需要以某种方式重新思考整个过程？我的最后一个限制是，我只能将JS插入网站，例如，我不能将新文件上传到服务器。

编辑1：变通办法

我通过在请求服务器上使用一个PHP中间文件为我解决了这个问题：

<?php
    echo file_get_contents('http://example.com');
?>

这将使用任何URL的HTML内容生成一个网站。现在，请求站点可以使用JavaScript:读取此信息

var getHTML = function ( url, callback ) {
// Feature detection
if ( !window.XMLHttpRequest ) return;
// Create new request
var xhr = new XMLHttpRequest();
// Setup callback
xhr.onload = function() {
    if ( callback && typeof( callback ) === 'function' ) {
        callback( this.responseXML );
    }
}
// Get the HTML
xhr.open( 'GET', url );
xhr.responseType = 'document';
xhr.send();
};

这修改了任何元素：

var element = document.getElementById("resultpage");
getHTML( 'http://localserver.org/test.php', function (response) {
    element.innerHTML = response.documentElement.innerHTML;
});

Answer 1

结账CORShttps://en.wikipedia.org/wiki/Cross-origin_resource_sharing也是同一文章中的JSONP。