JavaScript 从任意 URL 的 HTML 内部获取一些信息？答案

【问题标题】：JavaScript to get some information from inside the HTML at an arbitrary URL?JavaScript 从任意 URL 的 HTML 内部获取一些信息？
【发布时间】：2013-01-10 07:46:32
【问题描述】：

抱歉，我不知道按关键字查找此内容的正确术语...

所以，作为一个简单的新手练习，我尝试制作一个文件“test.html”（就在我的桌面上），这样当我在浏览器中加载它并单击页面上显示的按钮时，文章从维基百科的主页将出现在按钮下方的页面上。

有人告诉我尝试使用 iframe，我想出了这个：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript"">

function get_count(){
    var articlecount = document.getElementById("wiki_page").contentWindow.document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML;
    document.getElementById("put_number_here").innerHTML = articlecount;
}
    </script>

</head>

<body>

    <iframe id="wiki_page" style="display:none" src="http://en.wikipedia.org/wiki/Main_Page"></iframe>

    <input type="button" onclick="get_count()" />
    <p id="put_number_here"><p>

</body>
</html>

它不起作用，当我在暂存器中测试它时（使用 Firefox 17），我得到了这个：

var x = document.getElementById("wiki_page").contentWindow.document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML;
alert(x);
/*
Exception: Permission denied to access property 'document'
@Scratchpad:10
*/

（而alert(document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML); 直接在http://en.wikipedia.org/wiki/Main_Page 上完美运行，所以我知道这不是问题。将维基百科主页的源代码复制到一个新文件“test2.html”，并将其设置为iframe，也可以。）

我只是想以完全错误的方式做到这一点吗？

【问题讨论】：

恐怕你做不到。请阅读 MDN 上的 Same-origin policy。
当您说“不能这样做”时，您肯定不是说通过any方法完全不可能实现所需的功能吗？就像，似乎在说window.postMessage 可以做到...
仅当您有权访问该 wiki 页面文件时...
我的“test.html”页面中的脚本不可能自动从公共网页中的设定位置读取数字，当人类可以手动轻松完成...可以吗？ ~_^
所有跨域交互都需要控制两个来源，否则是不可能的。

标签： javascript html url

【解决方案1】：

您不能访问 iFrame 中的任何元素，除非 iFrame 引用的是同一个域。

对于相同的域调用，请使用此链接作为参考：

Calling a parent window function from an iframe

对于不同的域，请使用此链接以供参考：

How do I implement Cross Domain URL Access from an Iframe using Javascript?脚本

【讨论】：

【解决方案2】：

您可以使用以下方法引用其他框架：

window.frames["wiki_page"]

然后您可以使用以下方式引用 DOM 中的元素：

window.frames["wiki_page"].document.getElementById ("articlecount");

所以你可以试试：

var targetFrame = window.frames["wiki_page"];

然后使用以下方法访问元素：

targetFrame.document.getElementById("IDOfSomething");

确保您的 iframe 仍命名为 wiki_page 等...

【讨论】：

在 Scratchpad 的 test.html 页面上试过了。喜欢：alert(window.frames["wiki_page"].document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML);。它说“例外：window.frames.wiki_page 未定义”。这不是你的意思吗？
好的，用你刚刚添加的步骤试了一下。便签本：var targetFrame = window.frames["wiki_page"]; alert(targetFrame.document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML);。仍然说“异常：targetFrame 未定义”。（是的，它肯定还有id="wiki_page"。）
想在 JS Fiddle 中尝试一下，让我们都看看吗？
以前没听说过 JS Fiddle。刚刚注册了一个帐户...这项工作？：http://jsfiddle.net/Owen_R/JjtGF/1/（显然我只是复制粘贴了我修改的test.html文件版本的内容以尝试您描述的方法；还没有拆分js和 html...)