时间戳

首页 > 解决方案 > HTML - 从另一个站点提取文本

javascript - HTML - 从另一个站点提取文本

问题描述

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

我试图让我的主页从我的网络服务器中提取所述网站的标题。如果我去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 !

谢谢 ！！！

标签： javascripthtml

解决方案

如果您尝试从同一域获取纯文本信息，则 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 问题。

推荐阅读