HTML - 从另一个站点拉取文本

Question

我刚刚进入HTML/JavaScript，有一个问题要问你们。

我正在尝试让我的主页从我的 Web 服务器中提取所述网站的标题。 如果我去127.0.0.1/?q=name它会返回，让我们只说"Foo"。没有别的只是页面上明文中的"Foo"。

我希望我的网站在加载时动态拉取它。这是我用iFrame尝试的脚本，但它似乎可以移动所有内容。我是不是想多了？

<h1>Welcome to 
    <iframe src="http://127.0.0.1:8080/?q=name" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0"></iframe>
</h1>
Thank you for visiting !

谢谢！！！

Answer 1

如果您尝试从同一域获取纯文本信息，iframe 听起来有点矫枉过正 - 您可以考虑改用普通的网络请求，并在响应返回时填充标准元素(如<span>(：

<h1>
  Welcome to <span id="name-span"></span>
</h1>

与 JS：

fetch('http://127.0.0.1:8080/?q=name')
  .then(res => res.text())
  .then((textResponse) => {
    document.querySelector('#name-span').textContent = textResponse;
  });

要以这种方式填充多个项目，您可以考虑改用数组，例如：

const qs = ['name', 'age'];
qs.forEach((q) => {
  fetch('http://127.0.0.1:8080/?q=' + q)
  .then(res => res.text())
  .then((textResponse) => {
    document.querySelector('#' + q + '-span').textContent = textResponse;
  });
});

请注意，如果您尝试获取的信息位于同一域中，fetch可以工作 - 否则，您将不得不像您一样使用有点笨拙的iframe，或者将请求从服务器上退回，否则您会遇到 CORS 问题。

Answer 2

TL;DR

您不能只从Javascript访问外部资源，此限制是出于安全原因。

可能的解决方案

您已经使用过iframe，所以我假设您知道the CORS policy。

您可以尝试使用 JSONP，但是在这种情况下，您还需要在服务器端实现此概念，以便能够提供callback参数。

如果向同一域发出请求，您可以使用任何时间XMLHttpRequest

例如，这可以在JQuery的帮助下完成。

$.ajax({
  url: "http://127.0.0.1:8080/?q=name",
  cache: false,
  success: function(html){
    $("#your_h1_or_any_other_selector").append(html);
  }
});