CODEWITHSUNDEEP
javascriptjqueryhtmlajaxiframe
Bob Kimani
Bob Kimani

Reputation: 1164

Clicking element inside an iframe using jquery or javascript maybe AJAX

After going through numerous threads on numerous forums none of them come close to a solution to what I want to accomplish.

Here is want I want to accomplish:

I have a page on an iframe and I want to click a on a div tag inside that Iframe.How do I go about it .i have seen scripts that have mouse event emulator but I do not know how to use them.

Site 1 = http://site1.com/page.html

Site 2 = http://site2.com/abc.html

code for site 2: Code:

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

code for site 1:

Code:

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

What I would like to do is to have a script that automatically click on james bond (the text within the div) bearing in mind I have no control over http://site2.com/abc.html

Preferably list the methods one could accomplish this and where can i learn such type "DOM" (javascript mainly dealing with mouse events) for free. Any references are highly appreciated.A baby step walk through the code is highly appreciated.

I am noob in this area.

What I a have tried so far:

try 1: javascript 

.click();

error of try 1:cross domain issues

try 2: mouse emulation

error of try 2: noobieness code to complex for me

please help.

guessing solutions

  1. mouse emulation like scripts

  2. some neat jquery code

  3. AJAX ,PHP maybe

Upvotes: 0

Views: 4146

Answers (1)

lblu
lblu

Reputation: 126

Unfortunately since you are dealing with two sites on different domains, I don't think it's possible.

Mouse Emulator

Mouse emulator scripts probably dispatch a click event on the page, but unfortunately dispatchEvent won't work for iframes on different domains. Can you post a link or code what you tried with mouse emulation?

If you tried:

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

Based on this Stack Overflow post, the click won't work on a cross-domain iframe:

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

Quoted: "For instance, it can't be used to trick a cross-domain iframe document into thinking it was clicked."

If you tried:

el.dispatchEvent("click");

Then you need to get the element el somehow from within the iframe contents. Since the iframe is in another domain, you will be blocked from trying to get the iframe contents (using either JQuery or DOM).

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

(By the way, it would be easier to use jQuery to get the element since site2's code doesn't have an id on the element, and DOM doesn't provide an easy way to get elements besides by id or class)

JQuery

JQuery provides a function to get the contents of an iframe. Assuming that would work, then you could find the element in the iframe contents and trigger a click on the element. Unfortunately this will only work if the iframe is on the same domain. 

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

AJAX, PHP

I can't think of a way to click something through AJAX or PHP. Using AJAX, you could potentially make a GET request to site2 to retrieve the contents of abc.html and insert that on your page, but again, you would have cross-domain issues performing a GET request to another domain from the browser. Instead, you could make a server-side request to get the abc.html (using PHP or other server side code), then you wouldn't have the cross-domain issue. You'd still need to request any css and whatever javascript file where the somefnc() function lives and whatever else it depends on, then somehow inject all that on your page and you still wouldn't actually be interacting with site2, just copies of its files. This would be hacky and tricky to get working, and it really depends on what site2's somefunc() does.

Other options:

Upvotes: 5

Related Questions