从另一个HTML页面获取数据

Question

我正在建立一家网上商店来出售杂志，我需要展示杂志的图像。 为此，我想显示与发行杂志的公司网站相同的图像。

为此，使用绝对路径很容易，如下所示：

<img src="http://www.remotewebsite.com/image.jpg" />

但是，对于我而言，这是不可能的，因为每当有新杂志时，图像的名称都会更改。

在Javascript中，可以使用以下代码获取图像的路径：

var strImage = document.getElementById('Image').src;

但是，如果图像在另一个HTML页面中，是否可以使用类似的方法获取图像的路径？

Answer 1

假设您知道如何在杂志网站的DOM中找到正确的图像（否则，请忽略它）：

• 杂志网站必须明确允许显示您网站的客户通过启用CORS来获取其内容
• 您获取他们的HTML->为您提供文本流
• 用DOMParser解析->获取文档
• 使用您的知识或他们的布局（或良好的启发法，如果您感到幸运的话），使用常规的DOM导航来查找图像并获取其src属性

我将不详述任何这些步骤（周围已经有很多SO答案），尤其是因为您还没有描述技术部分可能遇到的特定问题。

Answer 2

可以，但是效率低下。 您将必须执行一个请求以加载该另一页面的所有HTML，然后在该HTML中找到您要查找的图像。

可以实现（使用XMLHttpRequest或fetch ），但是我可能会尝试找到一种更有效的方法。

Answer 3

您的要求在技术上是可能的，并且其他答案已经详细说明了如何实现此目的。

我想在这个答案中讲到的是，鉴于您所描述的需求，您可能应该如何设计它。 请记住，我所描述的是执行此操作的一种方法，当然还有其他正确的方法。

在将要运行您的应用程序的服务器上创建一个数据库。 一个简单的MySQL DB可以工作，但是您可以使用任何东西。 创建一个名为magazine的表，并带有列url 。 您的代码将从该数据库中提取URL。 只要杂志的URL发生更改，就只需更新数据库即可，而无需更改代码本身。

您的前端代码需要某种方式来访问数据库。 一种可能的解决方案是REST API。 此代码将查询数据库以获取最新值（以您的情况为杂志URL），并使它们可用于您的网页。 这可以用多种不同的语言/框架来完成，这是一个很好的教程，介绍了如何在Node.js和express中做类似的事情（这是我个人使用的东西）。

最后，您的前端代码需要调用REST API来获取更新的URL。 这需要使用某种基于JavaScript的语言来完成。 jQuery将使这变得非常简单，如下所示：

$(document).ready(function() {
  $.Get("http://uri_to_your_rest_api", function(data) {
    $("#myImage").attr("scr", data.url);
  }
});

假设您有这样的HTML：

<img id="myImage" src="">

然后就可以了-您有一个网页可以从数据库中动态提取图像源。

现在，如果您只是将精力投入到Web开发中，这似乎有些不堪重负。 但我向您保证，从长远来看，尝试从HTML页面解析代码会更容易:)