访问外部页面上的元素

时间:2013-03-07 00:31:55

标签: javascript jquery dom web

我有一个html页面,可以通过链接访问,该链接在网址中放置一个外部页面 - 例如

http://www.mydomain.com/mypage?external-page=encodedURL

我的页面负责从其传递的URL中删除一些数据。

如何使用javascript / jquery访问传入的页面?我需要能够为某些类和ID提取内容。

这违反了相同的原产地政策吗?如果是这样,还有其他方法来处理这样的外部页面吗?对我来说似乎很奇怪,我可以在浏览器或终端命令中点击网页并接收内容,但不能在js文件中。

2 个答案:

答案 0 :(得分:1)

如果外部页面和您的页面位于同一个域,那么您应该能够使用JavaScript访问该外部页面。否则,将不允许JavaScript访问外部网站,浏览器将阻止Cross-site scripting

答案 1 :(得分:1)

您可以使用浏览器扩展程序来抓取外部页面,然后将数据发送到您的网站,或者在页面中显示,以便随后可以通过您的网页的javascript通过DOM访问它。

您可以在您的域上使用代理来获取外部网页,并将其发送到您的域名来源的javascript。

您可以将API用于可访问的外部页面。

您可以询问,命令,更改外部页面的代码(如果您有权访问它)以使用Access-Control-Allow-Origin = *

来提供页面

我认为这就是你所能做的一切。

编辑:在您意识到用户进程之间的预期差异之前,“看起来很奇怪”。用户不被认为是恶意的,但过程可能是。例如,一个进程可以从用户登录的gmail会话中获取数据(如果它有权访问外部页面),并将该数据传输到服务器。由于终端上的用户可能(但不总是!)登录到该会话的用户,因此不认为该用户是恶意的。但是,其来源是用户导航到的某个网站的脚本不应该能够以与该用户相同的权限操作。由于该脚本也是代理,并且可以进行操作,但它不是由用户创建或指导的。这是隔离原产地和同一原产地政策的最有力理由。

示例

Bookmarklets和IFrame的执行上下文 如果您通过书签将JS注入每个页面,那么注入的代码将表现得就像它与页面的其余部分具有相同的原点,或者至少是该页面的“顶部框架”。它将在与顶部框架相同的上下文中执行。如果页面中存在嵌套的iframe,那么如果您的书签试图注入那里,则会出现“不安全的尝试访问页面x”错误。这是因为小书签的起源位于首页,并且首页永远无法访问不同域上的嵌套iframe。

因此,如果您要抓取的网站的某些部分位于顶部框架下方的iframe中,则您的书签将无法获取。

使用小书签传输数据 如果您想在一个页面上,在您的域上获取网址,然后从该网址中获取数据,在另一个网域上,然后在同一页面上显示该数据,则需要一种获取数据的方法。您可以使用书签,但流程仍然会涉及一些“用户帮助”。它会是这样的:

  1. 加载域名页面D.用户将URL放入输入框。点击提交。
  2. D上的Javascript打开一个新的标签/窗口,指向用户提供的网址。
  3. 用户点击该外部网页上的抓取书签,该页面会收集所需数据X.
  4. 所需数据X通过Ajax发送到“服务器”S,会话标识符为I.
  5. 页面D,轮询服务器S,直到收到一些带有会话标识符I的数据被通知,然后它获取该数据并将其显示在D上。
  6. 需要一台服务器。您无法使用本地存储来传输信息,因为这是特定于域的。有一个不需要服务器的替代品。它需要进行浏览器扩展。

    使用浏览器扩展程序传输数据扩展程序的“后台页面”与所有浏览器选项卡的本地服务器基本相同,它允许跨目标不同域的选项卡传输信息。此设置中的“客户端”是“内容脚本”,它们被加载到每个页面(就像书签一样,但不要求用户实际上点击书签来加载它。它会自动发生)。流程将如下:

    1. 再次佩戴。用户在输入框中输入url。点击提交 - >这会触发扩展中的一些代码。
    2. 扩展程序背景页面指示选项卡打开并将其定位到网址。
    3. 内容脚本自动加载到该选项卡中,检查后台应获取的数据。它获取该数据,并通过消息(json字符串)将其发送到后台页面。
    4. 后台页面将该通知和数据推送到第D页上的原始内容脚本。显示信息。
    5. (可选)后台页面还会将信息传输到您的服务器,以便保存到该用户的数据存储区中。
    6. 我用于浏览器扩展“背景页面”和“内容脚本”的语言非常关注Google Chrome。 Safari,Firefox中也提供相同的概念。如果你想支持IE,你将不得不解决其他问题。 IE10甚至不打算支持扩展。