javascript - 外部页面上的访问元素

标签 javascript jquery dom web

我有一个HTML页面,该页面可以通过将外部页面放置在url中的链接进行访问-例如

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

我的页面有责任从处理的网址中抓取一些数据。

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

这是否违反原产地政策?如果是这样,还有其他方法可以处理这样的外部页面吗?我觉得很奇怪,我可以在浏览器或终端命令中访问网页并接收内容,但不能在js文件中接收。

最佳答案

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

您可以在域上使用代理,该代理可获取外部页面并将其交给源于您域的javascript。

您可以对可访问的外部页面使用API​​。

您可以要求命令更改外部页面的代码(如果可以访问)以使用Access-Control-Allow-Origin = *来提供页面

我认为这就是您所能做的。

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



书签和IFrame的执行上下文
如果要通过书签将JS注入每个页面,则该注入的代码的行为就好像它与页面的其余部分(至少是页面的“顶部框架”)具有相同的来源。它将在与顶部框架相同的上下文中执行。如果页面中存在嵌套的iframe,则如果您的书签试图插入到页面中,则将收到“从此页面访问x的不安全尝试”错误。这是因为小书签的来源位于首页,并且首页也永远无法访问不同域上的嵌套iframe。

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

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


加载域的页面D。用户在输入框中输入一个URL。点击提交。
D上的Javascript打开一个新的标签/窗口,指向用户提供的URL。
用户在该外部页面上单击您的抓取书签,从而收集所需的数据X。
所需数据X通过Ajax发送到会话标识符为I的“服务器”S。
页面D轮询服务器S,直到它被通知已捕获具有会话标识符I的某些数据,然后它获取该数据并将其显示在D上。


需要服务器。您不能使用本地存储来传输信息,因为这是特定于域的。有一个替代方案,不需要服务器。它需要进行浏览器扩展。

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


页面D再次。用户在输入框中输入网址。单击提交->会触发扩展中的一些代码。
扩展程序后台页面指示一个选项卡打开并将其定位到url。
内容脚本会自动加载到该选项卡中,并在后台检查应获取的数据。它获取该数据,并通过一条消息(一个json字符串)将其发送到后台页面。
后台页面将该通知和数据推送到页面D上的原始内容脚本中。该脚本显示信息。
(可选)后台页面还将信息发送到服务器,以保存到该用户的数据存储中。


我用于浏览器扩展“背景页面”和“内容脚本”的语言主要集中在Google Chrome上。 Safari和Firefox也提供相同的概念。如果要支持IE,则必须制定其他措施。 IE10甚至不打算支持扩展。

关于javascript - 外部页面上的访问元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15260932/

相关文章:

javascript - KnockoutJS - 如何使用 Observable 数组在 foreach 中隐藏某些元素?

javascript - 我想使用 jquery 打开链接

JavaScript 搜索未按预期工作。如何解决?

javascript - DataTables javascript 无法应用于重复表

javascript - 从javascript获取DOM元素信息

javascript - 选择 child 时添加 child 的年龄

javascript - 如何仅通过使用 ID 使用 AJAX 和 PHP 删除 MySQL 数据库和屏幕上的文件?

jQuery:分块处理 HTML

javascript - Angular2 应用程序在单击事件时跳转到页面顶部

javascript - W3 DOM规范中String和DOMString有什么区别