javascript - 单击按钮修改 容器，从 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 问题，很快就会清楚，由于安全限制，从另一个 URL 读取 HTML 在 JavaScript 中几乎是不可能的。

是否有使用 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

结帐 CORS https://en.wikipedia.org/wiki/Cross-origin_resource_sharing在同一篇文章中还有 JSONP。