如何将网站的选定部分显示到 iframe？答案

【问题标题】：How to show selected part of website to iframe?如何将网站的选定部分显示到 iframe？
【发布时间】：2017-12-08 10:22:21
【问题描述】：

我想将这个website 中的这一部分显示到 iframe 中，但有一个问题。我用这段代码得到它：

<div style="overflow: hidden; margin: 15px auto; max-width: 575px;">
<iframe scrolling="no" src="https://www.betrush.com/verified/" 
style="border: 0px none; margin-left: -96px; height: 1200px; margin-top: 
-486px; width: 650px;">
</iframe>
</div>

所以我的问题是如何修改我的 iframe 设置以获取该网站的这一部分。

【问题讨论】：

XMLHttpRequest 无法加载 betrush.com/verified。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'example.com'。

标签： html css wordpress iframe widget

【解决方案1】：

你有两个选择：

利用 BetRush API 仅提取网页数据的一部分。这是迄今为止更简单、更可取的选择。
假设他们没有 API，您唯一的选择是加载整个网站，然后使用 JavaScript 提取您希望显示的细分：

function loadDoc(target) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;

      var doc = document.getElementById('iframe').contentWindow.document;
      doc.open();
      doc.write(this.responseText);
      doc.close();

    }
  };
  xhttp.open("GET", target, true);
  xhttp.send();
}

loadDoc("http://www.example.com");

&lt;iframe id="iframe"&gt;&lt;/iframe&gt;

内容保存为this.reponseText。您需要根据从网站返回的内容从中提取数据，然后使用doc.write(); 将其写入<iframe>。

话虽如此，目标也需要允许抓取。不幸的是，BetRush 似乎禁用了 Access-Control-Allow-Origin，这意味着您无法抓取他们的网站。因此，您不能以这种方式加载他们网站的一部分。

考虑到 BetRush 似乎没有 API，并且不允许您抓取他们的网站，因此您无法提取他们网站的一部分以包含在 iframe 中。

希望这会有所帮助！ :)

【讨论】：

怎么做？你能帮我处理那个JS吗？我只需要向我的网站展示网站的那一部分，仅此而已。有可能通过 iframe 吗？
XMLHttpRequest 无法加载 betrush.com/verified。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'example.com'。
我没有尝试获取数据。只需将该网站中的某些选定部分显示到我网站上的 iframe。
@DrMTR -- 他们网站的“部分”在技术上是他们的“数据”。不幸的是，如果没有 API 或他们允许您访问他们的数据，您就无法将他们网站的一部分包含在 iframe 中。
通过插入第一篇文章中的代码，我可以显示他们网站的某些部分，但不是我需要的确切内容。它显示网站的左侧。我需要右边的桌子。