Skip to content Skip to sidebar Skip to footer
Home / Javascript

Innerdocument.getelementbyid().click(); Doesn't Work In Firefox/chrome, In Ie It Works

Post a Comment
I am working with Iframes for controlling the elements of iframe by automating it from the parent html file. I was trying to to click the link defined in iframe.html file from the

Solution 1:

From Javascriptkit.com:

click() - Executes a click on a element as if the user manually clicked on it. In most browsers, click() only works on form INPUT elements that's non "submit" or "reset". It can't be used to simulate a click on a link or form submit button.

I have verified that this is the reason why it's not working for you. Also, I had to change the following line:

var innerDocument = frame1.document;

to

var innerDocument = window.frames["frame1"].document;

Will update with a way to do this in jQuery.

EDIT:

Here's how you do it in jQuery. Essentially you bind a click event and then call click() on the element. This simulates the action since there is no standard way of executing clicks on hyperlinks.

$(document).ready(function() {
        $("#frame1").ready(function () { //The function below executes once the iframe has finished loadingalert("iframe loaded");
            $('#frame1').contents().find('#a1').click(function() {
                alert("Hello");
                $('#frame1').attr('src', $('#frame1').contents().find('#a1').attr("href"));
                $('#frame1').load();
            });
            $('#frame1').contents().find('#a1').click();
        });

    });

Solution 2:

Create the event, initialize it and dispatch it on the node.

See https://developer.mozilla.org/en/DOM/element.dispatchEvent for example.

Just remember to call createEvent on the document that has the node you're going to dispatch on.

Solution 3:

You can do this without jQuery and without click event handlers on the anchor tags. (Confirmed with IE 9, FF 15, Chrome 23)

The reason it wasn't working (and for JackWilson's edit) is that [in IE at least] innerFrame.document == innerFrame.ownerDocument, so you were not actually looking for the anchor in the iFrame's content document. Use innerFrame.contentDocument instead.

(I haven't confirmed JackWilson's solution for using window.frames[] in browsers other than IE but some browsers may require referencing window.frames[] by index instead of its id. Anybody know for sure?)

Main page: "aclicktest.html":

<!DOCTYPE html><html><head><title>A click test</title></head><bodyonload="clickIframe();"><aid="alocal"href="http://stackoverflow.com"target=_blank>Local link</a><iframeid='frame1'src="iframeaclicktest.html"></iframe><inputtype='button'value='click local'onclick='clickLocal();'/><inputtype='button'value='click iframe'onclick='clickIframe();'/><scripttype="text/javascript">functionclickLocal(){document.getElementById("alocal").click();}
functionclickIframe(){document.getElementById("frame1").contentDocument.getElementById("aiframe").click();}
</script></body></html>

Iframe page: "iframeaclicktest.html":

<!DOCTYPE html><html><head><title>A click test IFRAME</title></head><body><aid="aiframe"href="http://stackoverflow.com"target=_blank>IFRAME link</a></body></html>

That's interesting that your old code was working in IE. What version? And did you define doctype? It may have been quirks mode behavior.

Post a Comment for "Innerdocument.getelementbyid().click(); Doesn't Work In Firefox/chrome, In Ie It Works"