javascript - 使用 jquery 或 javascript 可能是 AJAX 单击 iframe 内的元素

Question

在浏览了众多论坛上的大量帖子后，没有一个能接近我想要完成的目标的解决方案。

这是我想要实现的目标:

我在 iframe 上有一个页面，我想单击该 iframe 内的 div 标签。我该如何操作。我见过具有鼠标事件模拟器的脚本，但我不知道如何使用它们。

站点 1 = http://site1.com/page.html

站点 2 = http://site2.com/abc.html

站点 2 的代码: 代码:

<div>
    <div>
        <div attribute="text" onClick="somefnc();">
                james bond
        </div>
    </div>
</div>

站点 1 的代码:

代码:

<iframe src="http://site2.com/abc.html></iframe>

我想做的是有一个脚本可以自动单击 james bond(div 中的文本)，记住我无法控制 http://site2.com/abc.html

最好列出可以实现此目的的方法，以及我在哪里可以免费学习这种类型的“DOM”(主要处理鼠标事件的javascript)。 非常感谢任何引用。非常感谢逐步浏览代码。

我是这方面的菜鸟。

到目前为止我已经尝试过:

尝试1:javascript

.click();

尝试1的错误:跨域问题

尝试2:鼠标模拟

尝试2的错误:菜鸟代码对我来说太复杂了

请帮忙。

猜测解决方案

1. 类似脚本的鼠标模拟

2. 一些简洁的 jquery 代码

3. AJAX，PHP 也许

Answer 1

不幸的是，由于您正在处理不同域中的两个网站，我认为这是不可能的。

鼠标模拟器

鼠标模拟器脚本可能会在页面上调度单击事件，但不幸的是，dispatchEvent 不适用于不同域上的 iframe。您可以发布您尝试使用鼠标模拟的链接或代码吗？

如果您尝试过:

document.elementFromPoint(x, y).click(); 

根据此 Stack Overflow 帖子，该点击在跨域 iframe 上不起作用:

How to simulate a click by using x,y coordinates in JavaScript?

引用:“例如，它不能用于欺骗跨域 iframe 文档，使其认为它被点击。”

如果您尝试过:

el.dispatchEvent("click"); 

然后您需要以某种方式从 iframe 内容中获取元素 el 。由于 iframe 位于另一个域中，因此您将无法尝试获取 iframe 内容(使用 JQuery 或 DOM)。

var doc = iframe.contentDocument || iframe.contentWindow.document;  // security error due to cross-domain
doc.getElement ...

(顺便说一句，使用 jQuery 来获取元素会更容易，因为 site2 的代码在元素上没有 id，并且 DOM 不提供除 id 或 class 之外的简单方法来获取元素)

JQuery

JQuery 提供了获取 iframe 内容的函数。假设这可行，那么您可以在 iframe 内容中找到该元素并触发对该元素的单击。不幸的是，只有当 iframe 位于同一域时，这才有效。

var el = $("iframe").contents().find("div[attribute='text']"); // security error due to cross-domain
el.trigger("click");

AJAX、PHP

我想不出通过 AJAX 或 PHP 单击某些内容的方法。使用 AJAX，您可能会向 site2 发出 GET 请求以检索 abc.html 的内容并将其插入到您的页面上，但同样，从浏览器向另一个域执行 GET 请求时，您可能会遇到跨域问题。相反，您可以发出服务器端请求来获取 abc.html(使用 PHP 或其他服务器端代码)，这样就不会出现跨域问题。您仍然需要请求 somefnc() 函数所在的任何 css 和任何 javascript 文件以及它所依赖的其他任何文件，然后以某种方式将所有内容注入(inject)到您的页面上，您实际上仍然不会与 site2 交互，只是复制它的文件。这对于工作来说会很棘手，而且它实际上取决于 site2 的 somefunc() 的作用。

其他选项:

• 根据您需要执行的操作以及 site2 的 somefnc() 的作用，您可以尝试复制相同的功能，而不是通过单击 iframe 来完成。

• 如果您可以使用 site2，您可以尝试 postMessage 向 site2 发送消息: http://javascript.info/tutorial/cross-window-messaging-with-postmessage