JS - getElementById inside a frame

Question

I'm trying to insert into my webpage a form which is located in an external webpage.

I don't have the direct url to this form, so I'm trying to navigate the frame in this way:

function showForm() {
        var newIframe = document.createElement('iframe');
        newIframe.width = '800'; newIframe.height = '400';
        newIframe.src = "websiteURL"
        document.body.appendChild(newIframe);
        window.frames["iframe"].document.getElementById('HM_Item1_4_1_1').click();
    }

But from the console I get:

Uncaught TypeError: Cannot read property 'iframe' of undefined

The homepage of the external website is loaded, but the redirection isn't working.

score 2 · Answer 1 · answered Feb 14 '18 at 11:24

You are trying to get window.frames["iframe"] … but the iframe you created doesn't have a name or id at all, let alone that matches "iframe".

It's pointless searching the frames collection for the iframe anyway.

You already have a reference to it in the newIframe variable!

Just replace window.frames["iframe"] with newIframe.

Once you fix that, your next problem is that document is the wrong property to access.

Once you fix that, your next problem is that you said the iframe pointed to a different site. So you have to deal with cross-origin issues.

@Pickeroll — That's a long-winded and bloated approach. Just use `newIframe`. — Quentin, Feb 14 '18 at 15:06

score 0 · Answer 2 · answered Feb 14 '18 at 11:27

Keep in mind that you may come across different security and cross-origin errors while doing this.

Remember to wait for the iframe contents to load before acting on it using the onload event:

function showFrame() {
        const newFrame = document.createElement('iframe');
        newFrame.width = '800';
        newFrame.height = '800';
        newFrame.src = 'https://www.gorkahernandez.com';
        newFrame.onload = function() {
            const content = newFrame.contentDocument ? newFrame.contentDocument : newFrame.contentWindow.document;
            content.getElementById('HM_Item1_4_1_1').click();

        }
        document.body.appendChild(newFrame);
    }

JS - getElementById inside a frame

2 Answers2