仅使用 JavaScript 获取另一个站点元素的内容答案

【问题标题】：Get contents of another site's element using only JavaScript仅使用 JavaScript 获取另一个站点元素的内容
【发布时间】：2014-04-12 09:44:07
【问题描述】：

我正在制作一个需要查找与另一个单词相关的单词的用户脚本。我找到了a site，在那里我可以去http://semantic-link.com/#/stack，并且会有一个与stack相关的单词列表，格式为：

<!-- various stuffs here, e.g. <head>, a <div>, another <div>, start of <body> -->

    <div id="word0" class="word" onclick="updateTitle("stacks");" style="opacity: 1;">
        stacks
    </div>
    <div id="word1" class="word" onclick="updateTitle("flue");" style="opacity: 1;">
        flue
    </div>
    <div id="word2" class="word" onclick="updateTitle("popped");" style="opacity: 1;">
        popped
    </div>
    <div id="word3" class="word" onclick="updateTitle("overflow");" style="opacity: 1;">
        overflow
    </div>

在这种情况下，我只想从该页面获取字符串stacks。我发现的所有解决方案都不起作用，因为它们：

需要自定义页面，
使用 PHP，或者
使用$.ajax()、$.get() 或$('something').load()，它们仅限于执行它们的域。

有什么方法可以仅使用 JavaScript 将 #word0 元素的内容作为字符串获取？或者，是否有另一种方法可以找到与另一个词相关的词？

【问题讨论】：

如果您使用 iframe，我认为可以。
scriptlet/bookmarklet 怎么样？您打算将结果用于什么目的？可以肯定的是，这样做违反了跨站点脚本，这就是您必须使用这些工具的原因。（以及为什么 ajax 不起作用）
@ProllyGeek 不，你不能Get DOM content of cross-domain iframe
@ProllyGeek 同源策略。 developer.mozilla.org/en-US/docs/Web/JavaScript/…
您可以使用"How to get an AJAX get-request to wait for the page to be rendered before returning a response?" 中的技术做到这一点。 Greasemonkey 和 Tampermonkey 一直在做跨域混搭。

标签： javascript jquery html ajax greasemonkey

【解决方案1】：

您在问题中表示：

$.ajax()、$.get() 或 $('something').load() ... 仅限于执行它们的域。

这似乎指向 jQuery。实际上，限制在于浏览器本身的 Javascript，并且取决于称为 Same Origin Policy 的特定安全方面：

该政策允许在源自同一站点的页面上运行的脚本（方案、主机名和端口号的组合）无特定限制地访问彼此的 DOM，但禁止访问不同站点上的 DOM

本质上，您尝试做的事情是不可能的，除非远程服务器启用了CORS 以允许来自您的服务器的查询调用它。由于您无法控制远程服务器，因此我怀疑是否已设置。

【讨论】：

其实用户脚本有API，比如GM_xmlhttpRequest做跨域AJAX。无论如何，这不是这里的主要问题，因为目标页面是 AJAX 驱动的——这需要更多的解决方法。
@BrockAdams 澄清一下，我是否正确地说任何用户脚本都需要用户首先安装第三方插件或脚本（这可能会触发安全警告）？
没有。 Chrome 和 Opera 原生支持这一点。但是使用 Greasemonkey、Tampermonkey 和/或 Scriptish 扩展；他们更好。至于安全和隐私：他们的代码是公开可见的和/或开源的，并且有良好的记录。坦率地说，这些扩展比一开始就安装 Chrome 或 Firefox 的风险要小。
@BrockAdams 抱歉，但您似乎是在说 默认情况下 Chrome 和 Opera 允许跨域脚本，而无需用户在浏览器本身中安装任何插件或脚本。这显然是一个你比我更了解的领域，所以我认为我们的电线在这里的某个地方被交叉了。
不，我是说默认这些浏览器允许跨域脚本编写，来自用户脚本，无需用户安装任何插件或扩展名。 OP 声明并暗示他正在“制作用户脚本”，因此安装用户脚本是给定的。

【解决方案2】：

由于同源策略，仅使用 javascript 是不可能的。必须有一些服务器端干预来检索 html，无论是通过 3rd 方服务（例如 YQL）还是您自己的 php（或其他）脚本。

【讨论】：

【解决方案3】：

为什么不直接获取他正在获取的 JSON？如果我错了，请纠正我，但您只关注相关词而不是用户点击的内容？

$.get("http://semantic-link.com/related.php?word="+word);

编辑：试试这个：

$.getJSON("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D'http%3A%2F%2Fsemantic-link.com%2Frelated.php%3Fword%3Dword'&format=json&diagnostics=true&callback=",function(data){
alert(data.query.results.json.json[0].v);
});

【讨论】：

因为该调用在 JavaScript 中无法跨不同域工作。
你是对的。它没有必要的标题。新增 YQL 版本

【解决方案4】：

我认为你想要的很可行，也很容易完成。

首先您必须注意，当您查询该网站中的任何单词时，它会在后台进行“ajax”调用，例如：http://semantic-link.com/related.php?word=shrewd。知道那个 URL 是诀窍。

请注意，它会为您带来 JSON 格式的响应。所以你现在需要做的就是解析它。只需将上面示例中 URL 中的单词替换为您要使用的单词即可。 ;)

【讨论】：

这适用于网站本身，因为它们位于同一个域中。由于提到的跨域问题，当从不同域进行调用时，功能会有所不同。
是的。它仍然必须从后端完成。但最好提前知道它有一个 JSON 友好的 URL。
这是一个很好的观点，值得知道最初的提问者是否决定走这条路而不是实现纯 JS 解决方案。
使用 GM_xmlhttpRequest 从用户脚本调用该 URL 可以正常工作。它是纯 JS（标准用户脚本 API），不需要后端。